How can I extract the textContent from an HTML string without creating a HtmlElement?

Question

I recently came across an issue where I need to strip the html tags from the data before displaying it on screen.
The data came this way:

<p><span style="color: rgb(68, 68, 68);">Sample data which i want to get.</span></p>

What have I tried
In order to solve this issue, I created a div, added the html with innerHtml and extract the text with textContent.

function strip(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

The above code has been taken from stackoverflow.

The problem
I'm concerned if this is the correct thing to do, as this is creating extra divs every time we call the strip function.

The question
Is there any better way to accomplish this?

Answer 1

Maybe this helps you.

The following example uses another approach. Instead of extracting text it removes tags using a regular expression assuming your data is a html string.

Limitation: This regex doesn't work if your text content includes < or > characters. If that's an issue you need to modify the regex.

var str = '<p><span style="color: rgb(68, 68, 68);">Sample data which i want to get.</span></p>';
var str2 = '<p><span style="color: rgb(68, 68, 68);">Sample data which i <strong>want</strong> to get.</span></p>';

function strip(html) {
    return html.replace(/<\s*[^>]*>/gi, '');
}

console.log(strip(str));
console.log(strip(str2));