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>
CodePudding user response:
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>
CodePudding user response:
Why not just add the style fontWeight = "bold"
on each element?
<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.style.fontWeight = "bold"
});
</script>
CodePudding user response:
Use innerHTML instead of innerText, it should work.