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

【问题标题】：How can I extract the textContent from an HTML string without creating a HtmlElement?如何在不创建 HtmlElement 的情况下从 HTML 字符串中提取 textContent？
【发布时间】：2019-03-17 15:25:44
【问题描述】：

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

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

我尝试了什么
为了解决这个问题，我创建了一个div，用innerHtml添加了html，用textContent提取了文本。

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

以上代码取自stackoverflow。

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

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

【问题讨论】：

还有什么其他方法可以做到这一点？
考虑详细解释您的案例。你有 XY 问题。如前所述，通常您必须在 React 中避免此类事情。
@EddeAlmeida 只要没有.appendChild完成应该就没事吧？
我同意，但是如果 OP 从 XHR 响应中获取 HTML 字符串怎么办？
@EddeAlmeida 没有人在操纵 DOM。重新阅读代码。

标签： javascript html

【解决方案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 */))

【讨论】：

【解决方案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));

【讨论】：

【解决方案3】：

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

React refs 像 jquery 中的 id 一样工作，使用 refs 可以轻松获取该 div 的内容或任何其他参数

【讨论】：

嗨 Dwarka，担心的是创建那个额外的 div 是否好。
当你可以使用状态时为什么要创建额外的div，如果你想创建div，那么方法应该是创建一个组件并将数据作为props传递，这样获取和附加数据会容易得多

【解决方案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 元素。

【讨论】：