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），然后适当地解析节点。 / p>

请注意，您确实需要请求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 );
}

Answer 2

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

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

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

stripedHtml的html内容不带标签。

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

2 个答案: