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

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

首先，你不需要逃跑!。其次，您替换\w+为[^!]+because&nbsp;\w+is egal&nbsp;[a-zA-Z0-9_]+。所以，你可以试试下面的正则表达式。!([^!]+)!您的实现deleteSkid()很好，但是您将值传递给 asInputNumber所以defaultValue当组件重新渲染时它不会改变。只需将其替换为value，它就可以工作。<InputNumber&nbsp; min={0}&nbsp; value={skid[key]}&nbsp; rules={[&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; message: "Please input quantity!"&nbsp; &nbsp; }&nbsp; ]}&nbsp; onChange={(newQuantity) => {&nbsp; &nbsp; updateProductQuantity(skid, key, newQuantity, index);&nbsp; }}/>const arr = "this! i!s the i!npu!t";if (arr.includes('!')) {&nbsp; 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('!')) {&nbsp; 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;[&nbsp; "this! i!s the i!npu!t",&nbsp; "! !",&nbsp; "a!a!bb!c!c",&nbsp; "a!b!c",&nbsp; "xyz",].forEach(s => console.log(s.replace(regex, "$1<b>$2</b>$3")));