Put a bit of HTML inside a <pre> tag?_问答_开发者

开发者 https://www.devze.com 2023-02-12 01:22 出处：网络

How do I put a bit of HTML inside atag without escaping it? Or a开发者_运维知识库m I using an incorrect tag?

相关专题：

How do I put a bit of HTML inside a tag without escaping it? Or a开发者_运维知识库m I using an incorrect tag?

P.S. I cannot escape the HTML, it is produced by the server.

If you have no control over the emitted HTML, you can still encode it on the client side.

Here is how you would escape all markup inside <pre> tags using the jQuery library:

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

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

Edit: As requested, same code without using 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;
}

And run the encodePreElements after the DOM has been loaded:

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

This:

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

Prints this:

<div>Hello</div>

Zero Width Joiner = &zwj;

You need to escape the HTML, like so:

You can use HTML entities that are escaped and printed without compiling.

&#60; // will print <
&#62; // will print >

Using these two, you can print any HTML elements.

&#60;div&#62; // will print <div>

To solve your specific problem, you will need to parse the HTML string and convert the chevrons to these entities.

Put a bit of HTML inside a <pre> tag?

精彩评论

关注公众号

热门标签

图文推荐

Put a bit of HTML inside a <pre> tag?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：