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?

Consider explaining your case in details. You have XY problem. As it was mentioned, usually you have to avoid such things in React. — Estus Flask, Mar 17 '19 at 15:29
@EddeAlmeida Shouldn't it be alright as long as there is no `.appendChild` done? — Anurag Srivastava, Mar 17 '19 at 15:30
I agree, but what if OP was getting an HTML string from let's say an XHR response? — Anurag Srivastava, Mar 17 '19 at 15:32
Ok let's say, `this.setState({ htmlString: '
Sample data which i want to get.
' })` How to get the text content from this? — Anurag Srivastava, Mar 17 '19 at 15:36
@EddeAlmeida no-one is manipulating the DOM. Re-read the code. — Gabriele Petrioli, Mar 17 '19 at 15:36
So, the question is: "How can I extract the textContent from an HTML string without creating a HtmlElement?", right?. (It has nothing to do with react) — Tomás, Mar 17 '19 at 15:44
Does this answer your question? [Extract the text out of HTML string using JavaScript](https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript) — KyleMit, Jan 11 '20 at 20:07

score 2 · Answer 1 · answered Mar 17 '19 at 17:06

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

score 1 · Answer 2 · answered Mar 17 '19 at 16:45

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 */))

score 0 · Answer 3 · answered Mar 17 '19 at 15:58

0

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

answered Mar 17 '19 at 15:58

Dwarka Tiwari

185
1
8

Hi Dwarka ,concern is if it is good to create that extra div . – dfsdigging Mar 17 '19 at 16:05
Why to create extra div when you can use state and if you want to create div then the approach should be create a component and pass data as props so it will be much easier to get and append data – Dwarka Tiwari Mar 17 '19 at 16:08

Tomás · Answer 4 · 2019-03-27T16:21:00.180

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.

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

4 Answers4