在<pre>标记中放入一些HTML？

Question

在<pre>标记中放入一些HTML？

Kri*_*oks 4 html

如何在标签内放置一些HTML而不转义它？或者我使用的是不正确的标签？

PS我无法逃避HTML,它是由服务器生成的.

Answer 1

jev*_*lio 12

如果您无法控制发出的HTML,您仍然可以在客户端编码它.

以下是<pre>使用jQuery库转义标记内所有标记的方法:

$(function() {
    var pre = $('pre');
    pre.html(htmlEncode(pre.html()));
});

function htmlEncode(value){ 
  return $('<div/>').text(value).html(); 
}

Run Code Online (Sandbox Code Playgroud)

编辑:根据要求,不使用jQuery相同的代码:

function encodePreElements() {
    var pre = document.getElementsByTagName('pre');
    for(var i = 0; i < pre.length; i++) {
        var encoded = htmlEncode(pre[i].innerHTML);
        pre[i].innerHTML = encoded;
    }
};

function htmlEncode(value) {
   var div = document.createElement('div');
   var text = document.createTextNode(value);
   div.appendChild(text);
   return div.innerHTML;
}

Run Code Online (Sandbox Code Playgroud)

并encodePreElements在加载DOM之后运行:

<body onLoad='encodePreElements()'>
    <pre>Foo <b>bar</b></pre>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 2

pel*_*lón 9

这个:

    <pre>
      <&zwj;div>Hello<&zwj;/div>
    </pre>

Run Code Online (Sandbox Code Playgroud)

打印这个:

<div>Hello</div>

Run Code Online (Sandbox Code Playgroud)

零宽度Joiner = &zwj;

归档时间：	14 年，9 月前
查看次数：	7402 次
最近记录：	10 年，5 月前