показать html теги в html контенте, показать html фрагмент кода в html

Question

Мне было интересно, есть ли способ, которым я мог бы применить htmlentities() к var x, чтобы, если я положу привет

в text area и нажму на кнопку, это будет отобразите привет вместо привет , используя приведенный ниже код. Заранее спасибо

function myFunction1() {
  var x = document.getElementById("myText1").value;
  document.getElementById("demo1").innerHTML = x;
}

<textarea name="myText" id="myText1" type="text"></textarea>
<button onclick="myFunction1()">thing</button>
<p><span id="demo1"></span></p>

Answer 1

Вам нужно использовать <xmp> тег

<xmp>
  <p>hello</p>
</xmp>

function myFunction1() {
  var x = document.getElementById("myText1").value;
  document.getElementById("demo1").innerHTML = x;
}

<textarea name="myText" id="myText1" type="text"></textarea>
<button onclick="myFunction1()">Show</button>
<p><xmp id="demo1"></xmp></p>

Answer 2

Обычно это делается путем замены символа < на кодировку «меньше чем» HTML (<) и > на «больше чем» (>).

Например, вы должны использовать базовые c строковые методы, чтобы заменить что-то вроде

"<p>hello</p>"

на

"<p>hello</p>"

(В противном случае добавление его к внутреннему элементу HTML будет читать его как HTML, включая теги.)

Следует отметить, что вы также можете попробовать просто обернуть все в тег <pre>, но я у меня были разные результаты с этим. Я думаю, что приведенный выше метод является более безопасной ставкой.