Regular expression is overwriting css styles in html

April 3, 2022

I used regular expressions to make everything bold before the colon. But it is overwriting my css styles.

I want that the css styles are displayed. But don’t know how to fix this. I have tried to use !important next to the hex. But that didn’t work. Do I need to change the regular expression. Or do I need a new line of code?

<ul>
 <li>Apple: Has the color <span style="background-color:#FF0000">red</span></li>
 <li>Orange: Has the color <span style="background-color:#FFAE00">orange</span></li>
 <li>Banana: Has the color yellow</li>
 <li>Blackberries: Has the color purple</li>
 <li>Avocado: Has the color green</li>
</ul>

 <script type="text/javascript">

   let list = document.querySelectorAll("ul li");
   list.forEach((element) => {
     element.innerHTML = element.innerText.replace(/^[^:]+:/, '<b>$&</b>');
     
 </script>

>Solution :

The issue is because you are taking innerText and put it into innerHTML, you simply stripping off all the HTML from it.

let list = document.querySelectorAll("ul li");
list.forEach((element) => {
 element.innerHTML = element.innerHTML.replace(/^[^:]+:/, '<b>$&</b>');
});

<ul>
 <li>Apple: Has the color <span style="background-color:#FF0000">red</span></li>
 <li>Orange: Has the color <span style="background-color:#FFAE00">orange</span></li>
 <li>Banana: Has the color yellow</li>
 <li>Blackberries: Has the color purple</li>
 <li>Avocado: Has the color green</li>
</ul>