1

I want to color all punctuation marks in an HTML <article>. Say the text is black and I want to make . , ! ? ( ) { } # @ $ (and some other characters) to be red. Since it's not possible to do this with CSS alone, I tried to make a simple function to change every occurrence of that punctuation mark to a colored span:

This is! the, text. 
=>
This is<span style="color:red">!</span> the<span style="color:red">,</span> text<span style="color:red">.</span>

Here is the code for it:

[...document.querySelectorAll("article p")].map(
    (el) =>
        (el.innerHTML = el.outerText.replace(
        /([.,?(){}@#$%=<>&';’])/g,
        "<span style='color:red'>$1</span>"
     ))
);

The problem is that the current code removes all other <span>s and <code>s inside the text. I tried to use outerHTML, outerText, textContent, innerHTML, innerText, but each of them have different problems.

Can you please say how I can do this properly?

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Shahriar
  • 1,855
  • 2
  • 21
  • 45
  • 1
    Don't use regex on a whole `

    `'s innerHTML, which might contain any number of tags that would be picked up by your pattern and destroyed--loop over only text elements to modify their contents, so you can be assured there are no child tags in there. Check out [this answer](https://stackoverflow.com/a/61198587/6243352) or [this answer](https://stackoverflow.com/a/59582082/6243352).

     – ggorlen Sep 17 '22 at 19:55
  • 1
    Thank you so much for the links. I'm gonna close this since it's a duplicate of that. – Shahriar Sep 17 '22 at 20:01

0 Answers0