javascript - 字符串中的多个查找和替换

Question

我有一个看起来像这样的字符串，

Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}

我想将其转换为如下所示的 HTML 字符串，

Joe Bloggs created the <a href="" class="project-link">Joe Project 1</a> and created the brief <a href="" class="object-link">Brief Number 1</a>

我知道我能做到

var string = "Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}";
string.replace("{project}", "<a href='' class='project-link'>");
string.replace("{/project}", "</a>");
string.replace("{object}", "<a href='' class='object-link'>");
string.replace("{/object}", "</a>");

虽然这感觉不是特别简洁，有更好的方法吗？

Answer 1

您可以使用单个正则表达式

str.replace(/{(project|object)}(.*?){\/\1}/gi, '<a href="" class="$1-link">$2</a>')

说明:

1. {(project|object)}:匹配用大括号括起来的 project 或 object 字符串。将字符串添加到第一个捕获的组中。
2. (.*?):延迟匹配任何内容以满足条件
3. {\/\1}:\1 这里是第一个捕获组的反向引用。因此，如果第一个捕获的组包含 object，则它将匹配 {/object}。
4. gi:g是匹配所有可能的字符串。 i 是不区分大小写的匹配。
替换部分中的
5. $1和$2分别是第一个和第二个捕获组。

var str = 'Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}';

var result = str.replace(/{(project|object)}(.*?){\/\1}/gi, '<a href="" class="$1-link">$2</a>');

console.log(result);
document.body.textContent = result; // For showing result on page

document.body.innerHTML += '<hr />' + result; // For showing HTML on page

<小时/>

正则表达式可以简写为

{((?:pro|ob)ject)}(.*?){\/\1}