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()，因为正则表达式开头和结尾的/是正则表达式文字语法，可自行创建正则表达式对象。 / p>

使用RegEx创建带有classname的div

1 个答案: