CODEWITHSUNDEEP
javascriptjquery
rlsaj
rlsaj

Reputation: 735

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

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?

Upvotes: 3

Views: 4563

Answers (4)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18883

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

Upvotes: 0

Bumpy
Bumpy

Reputation: 1342

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

Upvotes: 0

mike510a
mike510a

Reputation: 2168

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

Upvotes: 1

Ezekiel Victor
Ezekiel Victor

Reputation: 3876

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

Upvotes: 6

Related Questions