Search code examples
javascriptjqueryhtmlencode

extract HTML containing text nodes without encoding them

I have the following HTML:

var html = jQuery('#parent').html();
console.log(html)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child"></div>
  5 > 3
</div>

I do jQuery('#parent').html(); and I get the following string:

'<div id="child"></div>
 5 &gt; 3'

I want to get the following string instead:

'<div id="child"></div>
 5 > 3'

How do I achieve that?

Please note that I won't know the value of the text node in advance. I simply don't want the value of the text node (if one exists) to be encoded into some html entity name.

This question is not a duplicate of How to decode HTML entities using jQuery? because the aforementioned post does not answer this question.

The current question is not about how to decode an html entity name like &gt; into >. This is easy.

The current question is about extracting HTML that might contain text nodes that might contain encodable values and I don't want any of these values to be formatted/encoded in any way.

Solution

  • Try this, by forcing jQuery to decode the html on a element that will not be appended to the DOM.

    var html = jQuery('<textarea/>').html(jQuery('#parent').html()).text();

console.log(html)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child"></div>
  5 > 3
</div>