如何从 HTML 标记字符串中检索文本内容？

Question

我正在检查字符串的值，并将它们与从网格中获得的值进行比较。 但是我得到的文本在实际有用的字符之前有很多不需要的字符。 但它们都以 html 标签结尾，所以我想要做的是削减我从该标签获得的价值。

这是我在字符串中得到的一个例子：

<i class="icon status red"></i>, 1 - deleted

以及我想要的字符串是什么：

1 - deleted

到目前为止，我已经尝试过：

data.forEach((value: any) =>{
((this.array.find(x => x.value === value['field'])).text).split("</i>")
});

这只是删除了标签，但我仍然得到了其余的文本。 我正在寻找一个简短的解决方案，而不是这样的：

list = ["foo","bar","foobar"]

index = list.index("bar")

a = list[index - 1]

b = list[index + 1]

print(a, b)

因为我想直接从字符串而不是列表中剪切。 所以我在想的是我会删除所有正确的东西。有可能吗？

Answer 1

为什么要运行 forEach 循环。使用切片和拆分，你可以得到你想要的字符串，给你：

let string = "<i class='icon status red'></i>, 1 - deleted"

let list = string.split(",")

console.log(list[1])

Answer 2

可以利用DOMParser 和DOMParser.parseFromString 来访问文本内容...

function getTextContentFromMarkup(markup) {
  return new DOMParser()
    .parseFromString(markup, "text/html")
    .body
    .textContent;
}

console.log(
  `getTextContentFromMarkup('<i class="icon status red"></i>, 1 - deleted') ...
  "${ getTextContentFromMarkup('<i class="icon status red"></i>, 1 - deleted')}"`
);

上面的脚本可以很容易地适应一种更健壮的方法，它只返回最后一个文本节点的值...

function getLastTextNodeValueFromMarkup(markup) {
  return [
    ...new DOMParser()
    .parseFromString(markup, "text/html")
    .body
    .childNodes
  ]
  .filter(node => node.nodeType === 3)
  .at(-1)
  ?.nodeValue;
}

console.log(
  `getLastTextNodeValueFromMarkup('<i class="icon status red"></i>, 1 - deleted') ...
  "${ getLastTextNodeValueFromMarkup('<i class="icon status red"></i>, 1 - deleted')}"`
);