使用正则表达式为文本添加样式答案

【问题标题】：Using regex to add styling to text使用正则表达式为文本添加样式
【发布时间】：2021-02-07 22:08:21
【问题描述】：

有一个文本输入，如果文本位于两个感叹号之间，则希望以粗体显示。

例如：a!a!bb!c!c 将是 aabbcc。文本位于 !将加粗。

这是代码：

const arr = "this! i!s the i!npu!t";

if (arr.includes('!')) {
  result = arr.replace(/\!(\w+)\!/g, '<b>$1</b>');
}

如果有一个连续的字符串，它似乎工作正常，但如果它们之间有空格的单词，它就不能正常工作。

有办法解决吗？

【问题讨论】：

\w 是“单词字符”的正则表达式转义。那不包括空格。要包含空格，您可以对空格执行[\w ]（捕获组，包括\w 和一个空格字符），或者[\w\s] 包含其他类似空格的字符，如制表符和回车。或者，如果您想要所有字符，包括标点符号和其他内容，您可以使用 .。

标签： javascript html regex string ecmascript-6

【解决方案1】：

首先，您不需要转义!。
其次，将\w+ 替换为[^!]+，因为\w+ 等于[a-zA-Z0-9_]+。

所以，你可以试试下面的正则表达式。

!([^!]+)!

const arr = "this! i!s the i!npu!t";

if (arr.includes('!')) {
  result = arr.replace(/!([^!]+)!/g, '<b>$1</b>');
}

console.log(result);

【讨论】：

【解决方案2】：

当你真的想匹配除!之外的所有字符时，它不起作用，因为你使用的是\w，它只匹配某些字符。方法是使用[^!]。

即[^，后面是你不想想匹配的所有字符，后面是]。

更正的代码：

const arr = "this! i!s the i!npu!t";

if (arr.includes('!')) {
  result = arr.replace(/\!(\w+)\!/g, '<b>$1</b>');
}

【讨论】：

证明它。请展示您提出的解决方案。
@RandyCasburn 我做到了；我建议用[^!] 替换\w。我真的需要从包含我的更改的问题中复制整个代码块吗？
是的，这就是 SO 的意图。不是每个人都会喜欢你可能对你的叙述性答案做出的相同假设。将您的解决方案与所述问题进行比较可以让 OP 对这些问题有更好的理解。

【解决方案3】：

问题是\w 不匹配空格，它匹配字母、数字和下划线。使用[\w\s] 匹配字母、数字、下划线或空格：

const arr = "this! i!s the i!npu!t";
const result = arr.replace(/!([\w\s]+)!/g, '<b>$1</b>');
console.log(result);

您可以安全地删除 arr.includes('!') 检查，因为如果没有替换发生，.replace 命令将返回未更改的字符串。

【讨论】：

我想赞成你的回答，但它包含一个你没有解释的变化：result 现在是const。
@BrianDrake 不再需要在if 块中为result 分配任何值，这就是为什么不需要使用let。

【解决方案4】：

如果这不应该匹配 ! ! 以使空格变为粗体  ，并使  在 ! i! 中的第一个单词字符之前开始，您还可以使用 3 个捕获组。

如果感叹号应该配对，您可以使用肯定的前瞻来断言可选配对。

(!\s*)(\w+(?:\s+\w+)*)(\s*!)(?=(?:[^!]*![^!]*!)*[^!]*$)

说明

(!\s*) 捕获第 1 组，匹配！和可选的空白字符
(\w+(?:\s*\w+)*) 捕获组 2，匹配 1+ 个单词字符并可选择重复匹配 1+ 个空白字符和 1+ 个单词字符
(\s*!) 捕获第 3 组，匹配可选的空白字符和！
(?=(?:[^!]*![^!]*!)*[^!]*$) 正向前瞻，断言可选对！直到字符串结束

Regex demo

如果匹配应该在同一行，您可以使用[^!\r\n] 排除否定字符类中匹配的换行符，并使用[^\S\r\n] 匹配没有换行符的空格而不是\s

Regex demo

const regex = /(!\s*)(\w+(?:\s+\w+)*)(\s*!)(?=(?:[^!]*![^!]*!)*[^!]*$)/g;
[
  "this! i!s the i!npu!t",
  "! !",
  "a!a!bb!c!c",
  "a!b!c",
  "xyz",
].forEach(s => console.log(s.replace(regex, "$1<b>$2</b>$3")));

【讨论】：