Is there a way to convert HTML into normal text without actually write it to a selector with Jquery?

Question

I understand so far that in Jquery, with html() function, we can convert HTML into text, for example,

$("#myDiv").html(result);

converts "result" (which is the html code) into normal text and display it in myDiv.

Now, my question is, is there a way I can simply convert the html and put it into a variable?

for example:

var temp;
temp = html(result);

something like this, of course this does not work, but how can I put the converted into a variable without write it to the screen? Since I'm checking the converted in a loop, thought it's quite and waste of resource if keep writing it to the screen for every single loop.

Edit:

Sorry for the confusion, for example, if result is " <p>abc</p> " then $(#mydiv).html(result) makes mydiv display "abc", which "converts" html into normal text by removing the <p> tags. So how can I put "abc" into a variable without doing something like var temp=$(#mydiv).text()?

Answer 1

Here is no-jQuery solution:

function htmlToText(html) {
    var temp = document.createElement('div');
    temp.innerHTML = html;
    return temp.textContent; // Or return temp.innerText if you need to return only visible text. It's slower.
}

Works great in IE ≥9.

Answer 2

No, the html method doesn't turn HTML code into text, it turns HTML code into DOM elements. The browser will parse the HTML code and create elements from it.

You don't have to put the HTML code into the page to have it parsed into elements, you can do that in an independent element:

var d = $('<div>').html(result);

Now you have a jQuery object that contains a div element that has the elements from the parsed HTML code as children. Or:

var d = $(result);

Now you have a jQuery object that contains the elements from the parsed HTML code.

Answer 3

You could simply strip all HTML tags:

var text = html.replace(/(<([^>]+)>)/g, "");

Answer 4

you can try:

var tmp = $("<div>").attr("style","display:none");
var html_text = tmp.html(result).text();
tmp.remove();

But the way with modifying string with regular expression is simpler, because it doesn't use DOM traversal.

You may replace html to text string with regexp like in answer of user Crozin.

P.S. Also you may like the way when <br> is replacing with newline-symbols:

var text = html.replace(/<\s*br[^>]?>/,'\n')
            .replace(/(<([^>]+)>)/g, "");

Answer 5

Why not use .text()

$("#myDiv").html($(result).text());

Answer 6

Easiest, safe solution - use Dom Parser

For more advanced usage - I suggest you try Dompurify

It's cross-browser (and supports Node js). only 19kb gziped

Here is a fiddle I've created that converts HTML to text

const dirty = "Hello <script>in script<\/script> <b>world</b><p> Many other <br/>tags are stripped</p>";
const config = { ALLOWED_TAGS: [''], KEEP_CONTENT: true, USE_PROFILES: { html: true }  };
// Clean HTML string and write into the div
const clean = DOMPurify.sanitize(dirty, config);
document.getElementById('sanitized').innerText = clean;

Input: Hello <script>in script<\/script> <b>world</b><p> Many other <br/>tags are stripped</p>

Output: Hello world Many other tags are stripped

Answer 7

Using the dom has several disadvantages. The one not mentioned in the other answers: Media will be loaded, causing network traffic.

I recommend using a regular expression to remove the tags after replacing certain tags like br, p, ol, ul, and headers into \n newlines.

Answer 8

var temp = $(your_selector).html();

the variable temp is a string containing the HTML

Answer 9

$("#myDiv").html(result); is not formatting text into html code. You can use .html() to do a couple of things.

if you say $("#myDiv").html(); where you are not passing in parameters to the `html()' function then you are "GETTING" the html that is currently in that div element. so you could say,

var whatsInThisDiv = $("#myDiv").html();
console.log(whatsInThisDiv); //will print whatever is nested inside of <div id="myDiv"></div>

if you pass in a parameter with your .html() call you will be setting the html to what is stored inside the variable or string you pass. For instance

var htmlToReplaceCurrent = '<div id="childOfmyDiv">Hi! Im a child.</div>';
$("#myDiv").html(htmlToReplaceCurrent);

That will leave your dom looking like this...

<div id="myDiv">
    <div id="childOfmyDiv">Hi! Im a child.</div>
</div>