如何使我的正则表达式匹配我的文本中的任何类型的 str [重复]

Posted 2023-02-22

【中文标题】如何使我的正则表达式匹配我的文本中的任何类型的 str [重复]

【英文标题】：How to make my regex match any kind of str in my text [duplicate]

【发布时间】：2019-12-15 07:18:20

【问题描述】：

对于 reactJs 中的一个副项目，我想做一些非常特别的事情。 假设您在 div 中有这样的文本：

“你好世界（这是一个测试）你能帮我吗？你会是我的天使

我的用户可以选择文本，就像您选择要复制的文本一样。 但是我的文字旁边有一个按钮。如果您选择文本的一部分并单击它，则该部分文本将带有下划线。清楚吗 ？ :)

所以现在这是我的问题。实际上它工作得很好，但是当我选择一个更大的文本（超过 3 行）或者如果文本中没有右括号时，我的网站崩溃了。

她是我的代码：

function underligne(text, selectedText) 
   const termRegex = new RegExp(`($selectedText)(?=[^>]*<)`, "gi");
   return text.replace(termRegex, "<span style='background-color:#3fff3d'>$1</span>");

正如我所说，它工作正常，但如果 selectedText 像这样，正则表达式会崩溃：

(it's a test

或

(it's a test)

或者如果 selectedText 长于大约 3 行

所以我尝试删除正则表达式并制作一个大循环，但它一点也不好。 我尝试了不同类型的正则表达式，但我总是遇到与未闭合括号相同的问题。

我唯一想要的就是在文本中每一次出现的 selectedText 下划线。无论 selectedText 的大小或其中的字符如何。

顺便说一句，对不起我的英语，我尽力消除拼写错误

编辑： 请最后一个问题:) 我想改进 escapeRegExp 以逃避 <br> 标签我该怎么做？ 我试过这个

function escapeRegExp(string) 
  return string.replace(/<br ?\/?>[.*+?^$()|[\]\\]/g, '\\$&'); 

或者这个：

function escapeRegExp(string) 
  return string.replace(/[.*+?^$()|[\]\\](<br ?\/?>)/g, '\\$&'); 

但没有成功：/

【问题讨论】：

我认为您需要先转义所选文本，然后才能在正则表达式上使用它，这是一个相关的帖子：***.com/questions/3446170/…

顺便说一句，我将 更改为 的样式以避免粗体效果。因为我试图用 windows.getSelection 找到所选文本下划线的文本中的位置

【参考方案1】：

function underligne(text, selectedText) 
  selectedText = selectedText.replace('(', '\\(').replace(')', '\\)');

  var termRegex = new RegExp(`($selectedText)(?=[^>]*<)`, "gi");
  return text.replace(termRegex, "<span style='background-color:#3fff3d'>$1</span>");



underligne("Hello world (it's a test) can you help me (it's a test) ? you will be my angel <3  text ", "(it's a test)")

【参考方案2】：

在将输入用户中的正则表达式特殊字符应用到正则表达式之前，您需要对其进行转义。 Mozilla documentation 有一个内置函数来处理这个问题：

function escapeRegExp(string) 
  return string.replace(/[.*+?^$()|[\]\\]/g, '\\$&'); // $& means the whole matched string

在创建正则表达式之前调用它：

const termRegex = new RegExp(`($escapeRegExp(selectedText))(?=[^>]*<)`, "gi");

【讨论】：

非常感谢，它真的很有帮助！