RegEx to wrap words in HTML

How To
1

Hello,
I would like to wrap (surround) all words “flyer” (case insensitive) in the HTML text content, not those in the link. My RegEx works fine on Regex101: regex101: build, test, and debug regex
Below my HTML file to test my (non working) JS RegEx.
Test RegEx
Thank you and regards.

<!DOCTYPE HTML>
<head>
<title>Test RegEx</title>
<style type="text/css">
 body{font-family:'Roboto',Arial,sans-serif}
 textarea{display:inline block;width: 100%;background:#fdfdfd; &:focus{background:#fff6df}}
 input{margin: 20px 0}
</style>
<script>
 function testRX() {
  var str=document.getElementById("str").innerHTML;
  var res=str.replace("(?<=>[^<]*)(flyer)|(flyer)(?=[^>]*<)","<u>$1$2</u>");
  document.getElementById("res").innerHTML=res;
 }
 </script>
</head>
<body id="ULR">

<P>I would like to wrap (surround) all words "flyer" (case insensitive) in the HTML text content, not those in the link. My RegEx works fine on <a href="https://regex101.com/r/NVmXd1/1" target="_blank">Regex101</a> ...</P>
<textarea rows="7" id="str">
flyertalk.com <a href="https://flyertalk.com">Flyer Talk website</a>
Forum <a href="https://www.flyertalk.com/forum/delta-air-lines-skymiles-665/">Delta</a>
----- <a href="https://www.flyertalk.com/forum/american-airlines-aadvantage-733/">AAA</a>
<u>Pneu</u> FLYER
- FLYER 40-622 <a href="https://www.veloplus.ch/AlleProdukte/Reifen/CityTourAlltag.aspx">TUB</a> FLYER
</textarea>

<P>... but not with this JS replacement:</P>
<pre>str.replace("(?<=>[^<]*)(flyer)|(flyer)(?=[^>]*<)","&lt;u&gt;$1$2&lt;/u&gt;"</pre>
<input type="button" value=" Test RegEx (function testRX in source)" onclick="testRX()" />

<textarea rows="7" id="res"></textarea>

<P>Expected result (like <a href="https://regex101.com/r/NVmXd1/1" target="_blank">Regex101</a>). 5 words "flyer" in HTML text are wraped by U tag: &lt;u&gt; &lt;/u&gt;</P>

<textarea rows="7" id="res">
<u>flyer</u>talk.com <a href="https://flyertalk.com"><u>Flyer</u> Talk website</a>
Forum <a href="https://www.flyertalk.com/forum/delta-air-lines-skymiles-665/">Delta</a>
----- <a href="https://www.flyertalk.com/forum/american-airlines-aadvantage-733/">AAA</a>
<u>Pneu</u> <u>FLYER</u>
- <u>FLYER</u> 40-622 <a href="https://www.veloplus.ch/AlleProdukte/Reifen/CityTourAlltag.aspx">TUB</a> <u>FLYER</u>
</textarea>

<P>How to fix my JS RegEx ?</P>
</body>
</html>
2

Welcome to the Make community!

It looks like you can use the word boundary token to match whole words, and not partial words.

/bflyer/b

Will not match

talkflyer
flyertalk

samliew – request private consultation

Join the unofficial Make Discord server to chat with us!

2 Likes
3

Thanks samliew.

I found a solution to my problem. See attached function textRX() in the HTML file below.

<!DOCTYPE HTML>
<head>
<title>Test RegEx</title>
<style type="text/css">
 body{font-family:'Roboto',Arial,sans-serif}
 textarea{display:inline block;width: 100%;background:#fdfdfd; &:focus{background:#fff6df}}
 input{margin: 20px 0}
</style>
<script>
function testRX() {
	var rex=new RegExp("(?<=>[^<]*)(flyer)|(flyer)(?=[^>]*<)","gi"); //Previous one had mistake
	var str=document.getElementById("str").textContent; //Not .innerHTML
	var res=str.replace(rex,"<u>$1$2</u>");
	document.getElementById("res").textContent=res;
}
 </script>
</head>
<body>

<P>I would like to wrap (surround) all words "flyer" (case insensitive) in the HTML text content, not those in the link. My RegEx works fine on <a href="https://regex101.com/r/izPAw4/1" target="_blank">Regex101</a></P>
<textarea rows="5" id="str">flyertalk.com <a href="https://flyer-talk.com">Flyer Talk website</a>
Forum <a href="https://www.flyer-talk.com/forum/delta-air-lines-skymiles-665/">Delta</a>
<u>Pneu</u> FLYER</textarea>

<input type="button" value=" Test RegEx" onclick="testRX()" />

<textarea rows="5" id="res"></textarea>

<P>Expected result (like <a href="https://regex101.com/r/izPAw4/1" target="_blank">Regex101</a>). 3 words "flyer" in HTML text are wraped by U tag: &lt;u&gt; &lt;/u&gt;</P>

<textarea rows="5" id="res"><u>flyer</u>talk.com <a href="https://flyer-talk.com"><u>Flyer</u> Talk website</a>
Forum <a href="https://www.flyer-talk.com/forum/delta-air-lines-skymiles-665/">Delta</a>
<u>Pneu</u> <u>FLYER</u></textarea>
<h4>Solution</h4>
<Pre>
function testRX() {
 var rex=new RegExp("(?<=>[^<]*)(flyer)|(flyer)(?=[^>]*<)","gi"); //Previous one had mistake
 var str=document.getElementById("str").<b>textContent</b>; //Not .innerHTML
 var res=str.replace(rex,"<u>$1$2</u>");
 document.getElementById("res").textContent=res;
}
</Pre>
</body>
</html>
2 Likes
5

Hello @samz :wave:

Congratulations on solving this one on your own!

Also thank you very much for coming back here with your ideas :pray:.

1 Like