Member Avatar for samzz

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: https://regex101.com/r/NVmXd1/1
Attached, my HTML file to test my (non working) JS 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>
Edited by samzz
  • 2 Contributors
  • 2 Replies
  • 67 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dani
Member Avatar for samzz

I found a solution to my problem. See attached HTML file.
Solution:

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;
}
<!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");
 var str=document.getElementById("str").textContent;
 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>
Member Avatar for Dani

I'm glad you got it working. Sorry, I just saw this thread now. I, myself, struggle quite frequently with Regex. Regex101 is always my lifesaver. Thank you so much for posting your solution so that it can be helpful to others in the future.

I've marked this question solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.