Select a specific area of ​​the grid containing and reformatting the grid

Question

I have a line that looks like

16427171479924442928230863465674813919123162824586<br>17866458359124566529476545682848912883142607690042<br>2421902671055626321111109370544217506941658960408<br>07198403850962455444362981230987879927244284909188<br> 

It really is a grid that looks like this without newlines (just has <br> , there are no actual newlines (\ n))

 16427171479924442928230863465674813919123162824586<br> 17866458359124566529476545682848912883142607690042<br> 24219022671055626321111109370544217506941658960408<br> 07198403850962455444362981230987879927244284909188<br> 

I want to boldly select some section of this grid that can change every time, because in this example we can say that I want the selection in bold 8617. (This number can be longer and stretch several lines, my actual grid is much larger)

I want it to look like this:

164271714799244429282308634656748139191231628245 86
17 866458359124566529476545682848912883142607690042
24219022671055626321111109370544217506941658960408
07198403850962455444362981230987879927244284909188

I tried using this (maxStr is a string of numbers that I want to replace)

 gridString.replace(maxStr, "<strong>" + maxStr + "</strong>") 

But this will not work, because it has <br> , so I need to replace the line 86<br>17

My question is: how can I replace a certain part of numbers that stretch over several lines with my bold version, keeping <br> where I need it.

JSFiddle illustrating my problem: https://jsfiddle.net/5d21c2r3/

Side note: I tried a solution in which I removed all <br> from my grid, then replaced the text, then re-added <br> every 50 characters, but that didn't work, because <strong> and </strong> ended up many characters are added.

Answer 1

You can create a regular expression that allows optional <br> between any number:

 var toReplace = "8617"; var regex = new RegExp("(" + toReplace.split("").join("(?:<br>)?") + ")") document.write(gridString.replace(regex, "<strong>$1</strong>")) 

See the updated JS Fiddle .

Description

The regular expression generated is /(8(?:<br>)?6(?:<br>)?1(?:<br>)?7)/ . (?:) is not an exciting group. ? after it means that it is optional - it can be displayed zero or once. ( at the beginning and ) at the end - the capture group - it allows you to use the substring later, like $1 .