How to color punctuation marks with JS

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?