Question

我最近遇到了一个问题，我需要先从数据中删除html标签，然后再将其显示在屏幕上。
数据是这样发送的：

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

我尝试了什么
为了解决此问题，我创建了一个div，并在HTML中添加了innerHtml，并使用textContent提取了文本。

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

上面的代码摘自stackoverflow。

问题
我担心这是否正确，因为每次我们调用strip函数时都会创建额外的div。

问题
有没有更好的方法可以做到这一点？

Answer 1

您不必每次都制作一个新元素。创建一个类并创建一次div并将其存储为实例属性。然后，每次需要剥离一些HTML时，只需用新内容覆盖现有内容并返回文本内容即可。

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

Answer 2

也许这对您有帮助。

以下示例使用另一种方法。假设您的数据是html字符串，它会使用正则表达式删除标签，而不是提取文本。

限制：如果您的文本内容包含<或>字符，则此正则表达式不起作用。如果这是一个问题，则需要修改正则表达式。

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

Answer 3

嗨，要获取特定div的HTML，您可以使用“引用”

通过ref，反应ref就像jquery中的id一样工作，您可以轻松获取该div的内容或任何其他参数

Answer 4

还有一种从HTML字符串获取文本的方法：DomParser。
它对所有浏览器（Check support here）都具有不错的支持

这是一个如何使用它的示例：

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

DomParser对您的解决方案的好处是DomParser API只能实例化一次，而您的解决方案每次调用strip函数时都必须创建一个div元素。

如何在不创建HtmlElement的情况下从HTML字符串中提取textContent？

4 个答案: