时间戳

首页 > 解决方案 > 如何隔离标记标签中包含的子字符串？

javascript - 如何隔离标记标签中包含的子字符串？

问题描述

任何人都可以建议一种简单的*方法来执行以下操作吗？

"this is <mark>just an</mark> example <mark>snippet</mark>"

到

["this is", "<mark>just an</mark>",  "example", "<mark>snippet</mark>" ]

谢谢大家的回答

下面的这个片段也涵盖了带有属性的标签

"<b class="highlight">Paradise</b> Lost"
.split(/(<\w+\s+(?!term).*?>.*?().*?<\/[a-zA-Z]*>)/g)
.filter((i) => i)

标签： javascripthtmlstringalgorithmreact-native

解决方案

使用正则表达式进行拆分，但考虑所有具有属性的 HTML 标记和 Web 组件，而不仅仅是<mark>.

function splitHTML (inputString) {
  return inputString
    .split(/(<[a-zA-Z-](?!term).*?>.*?().*?<\/[a-zA-Z-]*>)/g)
    .filter((i) => i);
}

console.log(splitHTML('this is <mark>just an</mark> example <mark>snippet</mark>'));

上面的代码适用于：

  • <mark>text</mark>
  • <my-tooltip>web component</my-tooptip>
  • <mark class="red">colored text</mark>

推荐阅读