admin 管理员组

文章数量: 1086019

I am using jQuery, and have an HTML block as follows: 

   <div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
    </div>

Which renders as:

Heading 1

Heading 2

Heading 3

What I am trying to do is show what HTML was used to create this block.

If I use $(this).clone().insertAfter(this); simply repeats what we see rendered, but what I actually want to see in my browser is:

<div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
 </div>

What's the best way to do this?

I am using jQuery, and have an HTML block as follows: 

   <div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
    </div>

Which renders as:

Heading 1

Heading 2

Heading 3

What I am trying to do is show what HTML was used to create this block.

If I use $(this).clone().insertAfter(this); simply repeats what we see rendered, but what I actually want to see in my browser is:

<div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
 </div>

What's the best way to do this?

  • javascript
  • jquery
Share Improve this question asked Oct 24, 2016 at 5:48 rlsajrlsaj 7351 gold badge12 silver badges39 bronze badges 4
  • document.getElementById('html-block').outerHTML – Rayon Commented Oct 24, 2016 at 5:49
  • Are you talking about having the html tags visible to the user? Try setting text, which will HTML-encode the passed value: $('<div/>', { text: $(this).html() }).insertAfter(this);. Can also be called as a function container.text( ... ) – David Hedlund Commented Oct 24, 2016 at 5:53
  • try .append() ? – Donald Wu Commented Oct 24, 2016 at 5:55
  • Yes HTML tags visible in the browser – rlsaj Commented Oct 24, 2016 at 5:56
Add a ment  | 

4 Answers 4

Reset to default 6

What you need to be able to do is escape the HTML before you output it so that the browser doesn't render the tags contained therein.

You can escape HTML easily using jQuery like this:

var escapedHtml = $('<div />').text($('#html-block').html());

Now you have a string with things like &lt;div id=&quot;html-block&quot;&gt; which you can spit out to the browser:

$('#html-block').after($('<pre />').html(escapedHtml));

All in one you could do this:

var $htmlBlock = $('#html-block');
$('<pre />').text($htmlBlock.html()).insertAfter($htmlBlock);

Also see this duplicate: Escaping HTML strings with jQuery

var entityMap = {
  "&": "&amp;",
  "<": "&lt;",
  ">": "&gt;",
  '"': '&quot;',
  "'": '&#39;',
  "/": '&#x2F;'
};

function escapeHtml(string) {
  return string.replace(/[&<>"'\/]/g, function (s) {
    return entityMap[s];
  });
}

... then use

var outer = escapeHTML($(this).clone().outerHTML);
$(outer).insertAfter(this);

var el = $("#html-block")
var html = el[0].outerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;");
el.after(html)

Notes:

  • el[0] gets the actual HTML dom element (as opposed to the jQuery-wrapped element)
  • outerHTML gets the HTML of the element itself (not just its contents)
  • the replace tags escape the "<" and ">" characters, which are what tells the browser to render the tags as tags and not just text.

Hope that helps!

EDIT: Oh, just saw the other answers; they're better :-)

str = "250m&lt;sup&gt;2&lt;/sup&gt;";
let entityMap = {
   "&lt;": "<",
   "&gt;": ">",
};
str = str.replace(/(&lt;)|(&gt;)/g, m => entityMap[m]);

console.log(str);

本文标签： JavaScriptjQuery how to get HTML and display HTML including tagsStack Overflow

版权声明：本文标题：JavaScriptjQuery: how to get HTML and display HTML, including tags - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744099890a2533451.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。