javascript - How can I extract the textContent from an HTML string without creating a HtmlElement? - Stack Overflow

admin管理员组

文章数量:1391064

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 acplish this?

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 acplish this?

• javascript
• html

Share Improve this question Follow edited Mar 17, 2019 at 16:20 Tomás 3,58133 gold badges2424 silver badges3939 bronze badges asked Mar 17, 2019 at 15:25 dfsdiggingdfsdigging 34511 gold badge55 silver badges1616 bronze badges 12

• What is thev other way to do this ? – dfsdigging Commented Mar 17, 2019 at 15:29
• 1 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 Commented Mar 17, 2019 at 15:29
• @EddeAlmeida Shouldn't it be alright as long as there is no .appendChild done? – Anurag Srivastava Commented Mar 17, 2019 at 15:30
• I agree, but what if OP was getting an HTML string from let's say an XHR response? – Anurag Srivastava Commented Mar 17, 2019 at 15:32
• 1 @EddeAlmeida no-one is manipulating the DOM. Re-read the code. – Gabriele Petrioli Commented Mar 17, 2019 at 15:36

 |  Show 7 more ments

4 Answers 4

Sorted by: Reset to default 3

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

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.

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

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

本文标签：