从文本中去除标签(在 React JS 中)

IT技术 javascript regex reactjs dom replace
2021-05-02 22:54:23

我在变量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 中得到错误不是函数

知道如何以 React 喜欢的方式做到这一点吗?

2个回答

cleanHtml是一个字符串而不是一个节点。所以getElementsByClassName不适用,因为它不是字符串函数

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

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

并且stripedHtml将拥有没有标签的 html 内容。

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

请注意,您确实需要请求textContent而不是innerHTML,因为您不希望在您的react输出中包含任何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 );
}