javascript - 使用 RegEx 创建带有类名的 div

Question

使用 RegEx，我想将示例中的构造替换为 div。

所以，之前:

::: foo
some text
:::

之后:

<div class="foo">
some text
</div>

我找到了如何完成它( test )，但我的解决方案仅适用于一个类。换句话说，类被硬编码到脚本中:

<script>
document.body.innerHTML = document.body.innerHTML.replace(new RegExp(/(:::\s?[a-z])\w+/, 'g'), '<div class="foo">');
document.body.innerHTML = document.body.innerHTML.replace(new RegExp(/:::/, 'g'), '</div>');
</script>

如何更改它，以便它适用于任何类名？例如，这些结构也应该转换为 div:

::: foobarfoo
some text
:::

和

::: foo-bar-foo_bar_foo123-foo
some text
:::

Answer 1

您可以使用capturing groups ，也就是说，将正则表达式的一部分放在括号中，然后匹配的该部分将被捕获以用于替换，您可以在其中使用 $1 引用它:

var text = document.body.innerHTML;
text = text.replace(/:::\s?([^\s:]+)/g, '<div class="$1">')
text = text.replace(/:::/g, '</div>');
document.body.innerHTML = text;

如果同一正则表达式中有多个捕获组，则第二个及后续捕获组将由 $2、$3 等引用。

请注意，您应该避免重复更新 document.body.innerHTML - 最好将原始文本放入变量中，然后用该变量进行替换，最后将最终结果写回 document.body.innerHTML。您还可以链接 .replace() 调用:

document.body.innerHTML = document.body.innerHTML
                           .replace(/:::\s?([^\s:]+)/g, '<div class="$1">')
                           .replace(/:::/g, '</div>');

另请注意，您不需要调用 new RegExp()，因为正则表达式开头和结尾的 / 是创建一个正则表达式对象本身。