如何将包含字符串的文本替换为HTML标记?

时间:2017-09-02 23:23:27

标签: javascript html replace html-entities

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

bold("Hello")

上面的代码应替换为:

<b>Hello</b>

以下是我目前使用的代码:

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

问题在于,它不是创建<b>代码,而是将<>转换为HTML实体 - &amp; lt; &安培; GT;

此外,将")的所有实例替换为</b>似乎不切实际。

实现这一目标的最佳途径是什么。

感谢您的帮助,谢谢!

2 个答案:

答案 0 :(得分: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”类的任何元素。一个警告是,这将取代所有的子元素,所以如果你依赖附属于子元素或类似的东西的听众,你也需要照顾它。

答案 1 :(得分:-1)

正则表达式帮助您解决更换问题。

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

console.log(str);