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

Question

有一个文本输入，如果文本位于两个感叹号之间，则需要以粗体显示文本。例如：a!a!bb!c!c将是 a a bb c c。文本位于 ! 将被加粗。这是代码：const arr = "this! i!s the i!npu!t"; if (arr.includes('!')) {   result = arr.replace(/\!(\w+)\!/g, '<b>$1</b>'); }如果有一个连续的字符串，它似乎工作正常，但如果它们之间有空格的单词，它就不能正常工作。有办法解决吗？

Answer 1

1. 首先，你不需要逃跑!。

2. 其次，您替换\w+为[^!]+because \w+is egal [a-zA-Z0-9_]+。

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

!([^!]+)!

您的实现deleteSkid()很好，但是您将值传递给 asInputNumber所以defaultValue当组件重新渲染时它不会改变。只需将其替换为value，它就可以工作。

<InputNumber

  min={0}

  value={skid[key]}

  rules={[

    {

      required: true,

      message: "Please input quantity!"

    }

  ]}

  onChange={(newQuantity) => {

    updateProductQuantity(skid, key, newQuantity, index);

  }}

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

if (arr.includes('!')) {

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

}

console.log(result);

Answer 2

问题是\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如果没有替换发生，命令将返回未更改的字符串。问题是\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如果没有替换发生，命令将返回未更改的字符串。

Answer 3

它不起作用，因为您使用的是\w, 当您真的想匹配除!. 这样做的方法是使用[^!].

即, 后跟所有不想[^匹配的字符，再跟.]

更正后的代码：

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

if (arr.includes('!')) {

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

}

Answer 4

如果这不匹配! !使空格变为粗体<b> </b>，并且要<b>在第一个单词字符之前开始，! <b>i</b>!您也可以使用 3 个捕获组。

如果感叹号应该配对，您可以使用正向先行来断言可选对。

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

解释

• (!\s*)夺取第一组，比赛！和可选的空白字符

• (\w+(?:\s*\w+)*)捕获第 2 组，匹配 1+ 个单词字符并可选择重复匹配 1+ 个空白字符和 1+ 个单词字符

• (\s*!)捕获第 3 组，匹配可选的空白字符和 !

• (?=(?:[^!]*![^!]*!)*[^!]*$)正面前瞻，断言可选对！直到字符串的末尾

正则表达式演示

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

正则表达式演示

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")));