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>