如何用 HTML 标签替换包含字符串的文本？

Question

我正在尝试找出如何用 HTML 标签替换页面上与某个短语匹配的任何文本实例 - 内容应保持不变。

bold("Hello")

上面的代码应该替换为：

<b>Hello</b>

这是我当前正在使用的代码：

node.data = node.data.replace('bold("','<b>');
node.data = node.data.replace('")','</b>');

这样做的问题是，<b>它不是创建标签，而是将<和转换>为它们的 HTML 实体 - << > 。

")此外，用替换所有实例似乎不切实际</b>。

实现这一目标的最佳方法是什么？

我将不胜感激任何帮助，谢谢！

Answer 1

我假设您并不是字面意义上指页面上的所有文本，而是指给定元素内的所有文本。DucFilans 在正则表达式方面是正确的，我将稍微修改他的答案以提供完整的工作解决方案：

var parserRules = [
  { pattern: /bold\("(.*?)"\)/g, replacement: '<b>$1</b>' },
  { pattern: /italics\("(.*?)"\)/g, replacement: '<i>$1</i>' }
];

document.querySelectorAll('.parse').forEach(function(tag) {
  var inner = tag.innerHTML;
  parserRules.forEach(function(rule) {
    inner = inner.replace(rule.pattern, rule.replacement)
  });
  tag.innerHTML = inner;
});

<div class='parse'>
  <div>bold("Hello") world <p> Rose italics("pink") slow bold("!") </p> </div>
  <div>bold("astiago") cheeeeeeese!</div>
</div>

您可以在 parserRules 数组中定义正则表达式模式和替换规则，然后将解析任何标有“parse”类的元素。一个警告是，这将替换所有子元素，因此如果您依赖附加到子元素或类似内容的侦听器，您也需要注意这一点。