从文本中剥离标签（在 React JS 中）

Posted 2023-02-22

【中文标题】从文本中剥离标签（在 React JS 中）

【英文标题】：Strip tag from text (in React JS)

【发布时间】：2019-02-14 21:36:12

【问题描述】：

我在变量 cleanhtml 中有多个完整的 html 代码，我需要从文本中去除特定标签。

let cleanHTML = document.documentElement.outerHTML

这个：

<span class="remove-me">please</span>
<span class="remove-me">me too</span>
<span class="remove-me">and me</span>

到这里：

please
me too
and me

我正在尝试这样做：

var list = cleanHTML.getElementsByClassName("remove-me");
var i;
for (i = 0; i < list.length; i++) 
  list[i] = list[i].innerHTML;

但是我从 React 得到错误 cleanHTML.getElementsByClassName is not a function

知道如何以 React 喜欢的方式进行操作吗？

【问题讨论】：

cleanHTML 只是一个字符串？理论上，您可以使用 xmldoc 解析器加载它，然后获取 textContent（您的反应 jsx 中不需要任何 html）

>([^>]*)<? $1

【参考方案1】：

您的cleanHtml 是字符串而不是节点。所以getElementsByClassName 不适用，因为它不是字符串函数

您可以使用正则表达式来执行此操作。以下代码可能会有所帮助。

var stripedHtml = cleanHtml.replace(/<[^>]+>/g, '');

而stripedHtml 的 html 内容将不带标签。

【讨论】：

我知道这会删除所有标签，但我试图只删除具有特定类的标签

【参考方案2】：

我从您的规范中猜测您的 cleanHTML 是一个字符串，因此您需要将字符串转换为一个节点（例如：通过从中创建一个 div），然后适当地解析节点。

请注意，您确实需要请求 textContent 而不是 innerHTML，因为您不希望在反应输出中包含任何 html

const htmlContent = `<span class="remove-me">please</span>
<span class="remove-me">me too</span>
<span class="remove-me">and me</span>`;

const getNodesToRemoveFromElement = (stringContent) => 
  const el = document.createElement('div');
  el.innerHTML = stringContent;
  return el.getElementsByClassName('remove-me');
;

for (let node of getNodesToRemoveFromElement( htmlContent ) ) 
  console.log( node.textContent );