JavaScript/jQuery: how to get HTML and display HTML, including tags

Question

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?

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
– David Hedlund, Commented Oct 24, 2016 at 5:53

Ezekiel Victor · Accepted Answer · 2016-10-24 05:57:24Z

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 <div id="html-block"> 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);

answered Oct 24, 2016 at 5:57

Ezekiel Victor

3,8741 gold badge30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rlsaj Over a year ago

Perfect, escaping the HTML was what I was missing. Thanks.

Community · Accepted Answer · 2017-05-23 10:32:32Z

1

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);

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Oct 24, 2016 at 5:58

mike510a

2,1881 gold badge15 silver badges29 bronze badges

1 Comment

rlsaj Over a year ago

Thanks for the mapping mike.

Bumpy · Accepted Answer · 2016-10-24 06:11:09Z

0

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 :-)

answered Oct 24, 2016 at 6:11

Bumpy

1,3422 gold badges22 silver badges33 bronze badges

Comments

Mahdi Bashirpour · Accepted Answer · 2019-10-08 10:53:00Z

0

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);

answered Oct 8, 2019 at 10:53

Mahdi Bashirpour

19k17 gold badges134 silver badges154 bronze badges

Collectives™ on Stack Overflow

JavaScript/jQuery: how to get HTML and display HTML, including tags

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related