Можно ли читать HTML-теги в объекте JSON и отображать их на веб-странице?

У меня есть объект JSON, который выглядит следующим образом:

id:
text: <h1>This is my text</h1> <p> I want to include HTML 
            and reflect those tags on the page. </p>

Я использую Angular2 HTTP_PROVIDER для чтения данных из JSON.

В моем шаблоне HTML я показываю JSON.dataString на веб-странице. Как отразить HTML-теги на веб-странице, в настоящее время теги отображаются как простой текст.

<p>{{jsonObject.text}}</p>

Есть ли способ прочитать те HTML-теги, которые включены в объекты JSON, и отобразить их на веб-странице?


json angular html angular2-http
person fuzzi    schedule 15.10.2016    source источник
comment
Возможно, это поможет: stackoverflow.com / questions / 15754515 /   -  person mxscho    schedule 16.10.2016

Ответы (3)


arrow_upward
1
arrow_downward

Что-то вроде:

<div [innerHTML]="jsonObject.text"></div>

Должен отображать текстовый объект как необработанный HTML. Будьте осторожны с внедрением XSS, когда делаете что-то подобное.

Более подробно см. этот вопрос.

person rjmunro    schedule 15.10.2016
comment
Спасибо! Это работало без квадратных скобок .. ‹div innerHTML = {{jsonObject.text}}› ‹/div› - person fuzzi; 16.10.2016
comment
Я считаю, что изначально это должно было быть <div [innerHTML]="jsonObject.text"></div>". И нет, не нужно беспокоиться о XSS, Angular справится с этим. - person Estus Flask; 16.10.2016
comment
@estus Используя innerHTML, вы обойдете кодировку HTML в Angular, что означает, что вы обойдете ее защиту от XSS. - person rjmunro; 18.10.2016
comment
Это не правда. Результатом привязки innerHTML является неэкранированная, очищенная разметка. Вредные вещи (включая все, что связано со сценарием) не могут быть добавлены таким образом в документ. И если вы обнаружите, что они могут, не стесняйтесь открывать вопрос. См. дополнительную информацию по этому вопросу. - person Estus Flask; 18.10.2016

arrow_upward
1
arrow_downward

Вы можете попробовать сделать это так:

function textHtml(input) {
    var el = document.createElement("textarea");
    el.innerHTML = input;
    return el.value;
}

А затем используйте эту функцию, чтобы получить текст с тегами

person Vyacheslav    schedule 15.10.2016

arrow_upward
0
arrow_downward

Я не использую Angular, но делаю что-то подобное.

<p id="myId"></p>
<script>
document.getElementById("myId").appendChild(jsonObject.text);
</script>

Я не тестировал.

person user3502626    schedule 15.10.2016