How to make my regex match any kind of str in my text

Question

For a side-project in reactJs i want to do something very particular. Let's imagine you have a text like this in a div:

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

My user can select the text like you select a text to copy it. But there is a button next to my text. If you select a part of the text and click on it the part of the text will be underline. is it clear ? :)

So now here it's my problem. Actually it works fine but when i select a bigger text (more than 3 lines) or if there is unclose parenthesis in the text my website crash.

Her my code :

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

}

So as i said it works fine but the regex crash if the selectedText is like :

(it's a test

or

(it's a test)

or if the selectedText is longer than around 3 lines

So i tried to remove the regex and make a big loop but it's not nice at all. I tried different type of regex but i always get the same trouble with the unclosed parenthesis.

The only things i want it's to underline every occurence of the selectedText in the text. Whatever the size of the selectedText or the character in it.

Btw sorry for my english i tried to do my best to remove as much as i can the spelling mistake

EDIT : Just a last question please :) I want to improve the escapeRegExp to escape <br> tag how can i do that ? i tried this

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

or this :

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

but without success :/

I think you need to escape the selected text before using it on the regular expression, here is a related post about that: https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex — Shidersz, Aug 07 '19 at 15:48
Btw i change by with a style to avoid bold effect. Because i was trying to find the position in the text of the selected text underligne with windows.getSelection — Virgile Junique, Sep 19 '19 at 12:24

score 2 · Accepted Answer · answered Aug 07 '19 at 15:51

2

You need to escape regex specials chars in input user before applying it into regex. Mozilla documentation has a built function to handle this:

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

Just call it before creating regex:

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

answered Aug 07 '19 at 15:51

guijob

3,851
1
17
31

Thanks a lot it has been really heplfull ! – Virgile Junique Aug 08 '19 at 09:33

score 0 · Answer 2 · answered Aug 07 '19 at 16:00

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

How to make my regex match any kind of str in my text

2 Answers2