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

Question

我在变量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喜欢的方式做到这一点吗？

Answer 1

我猜你的规范是你的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 );
}

Answer 2

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

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

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

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