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

【问题标题】：How to replace text containing string with a HTML tag?如何用 HTML 标签替换包含字符串的文本？
【发布时间】：2017-09-03 07:52:33
【问题描述】：

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

bold("Hello")

上面的代码应该替换为：

<b>Hello</b>

这是我目前使用的代码：

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

问题在于，它不是创建<b> 标记，而是将< 和> 转换为它们的HTML 实体- < >.

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

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

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

【问题讨论】：

你需要使用 createElement() 来代替。
或者这可能对你有帮助：locutus.io/php/strings/htmlentities
什么是node.data,..？
如果你想学习的话，去阅读几乎所有的 JavaScript 初学者指南吧。
Creating a new DOM element from an HTML string using built-in DOM methods or prototype的可能重复

标签： javascript html replace html-entities

【解决方案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' 类的元素。一个警告是这将替换所有子元素，因此如果您依赖附加到子元素的侦听器或类似的东西，您也需要注意这一点。

【讨论】：

【解决方案2】：

正则表达式可以帮助您解决替换问题。

var str   = 'bold("Hello")';
var regex = /bold\("(.*?)"\)/;
str = str.replace(regex, "<b>$1</b>");

console.log(str);

【讨论】：