CODEWITHSUNDEEP
javascripthtml
dfsdigging
dfsdigging

Reputation: 345

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

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?

Upvotes: 3

Views: 3443

Answers (4)

Tom&#225;s
Tom&#225;s

Reputation: 3561

There is an alternative to get the text from an HTML string: DomParser.
It has decent support for all browsers (Check support here)

Here is an example how you can use it:

function strip(html){
   var doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || "";
}

Benefits of DomParser over your solution is that DomParser API can be instantiated only once, whereas your solution has to create a div element everytime you call the strip function.

Upvotes: 2

Flyer53
Flyer53

Reputation: 764

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

Upvotes: 3

user4639281
user4639281

Reputation:

You don't have to make a new element every time. Make a class and create the div once and store it as an instance property. Then every time you need to strip some HTML you just overwrite the existing contents with the new contents and return the text content.

class Stripper
{
   constructor() {
      this._target = document.createElement("div")
   }
   strip(html) {
      this._target.innerHTML = html
      return this._target.textContent || this._target.innerText || ""
   }
}

const stripper = new Stripper()
console.log(stripper.strip(/* your html */))

Upvotes: 1

Dwarka Tiwari
Dwarka Tiwari

Reputation: 185

Hi to get the HTML of specific div you can use ‘refs’

React refs work like id in jquery with the refs you can easy get the content or any other param of that div

Upvotes: 0

Related Questions