Change color of all special char / using JS

Question

I'm trying to change the color of a special char / if it's present in any of the

tags.

This is what I have tried:

var p = document.getElementsByClassName("items");
p.innerHTML = p.innerHTML.replace(/\.|:/g, function(match) {
  return "<i style=color:tomato;font-weight:bold>" + match + "</i>"
})

<p class="i  items">A/B </p>
<p class="i  items">C</p>
<p class="i  items">C/E</p>

I get a console error:

`Uncaught TypeError: Cannot read properties of undefined (reading 'replace')`

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Konrad, Nov 23 '22 at 21:51
are you trying to change the color of just the `/` or the entire line? — Giacomo Gagliano, Nov 23 '22 at 22:31

Konrad · Accepted Answer · 2022-11-23T22:13:13.927

2

getElementsByClassName returns an array-like object. Arrays don't have innerHTML property. You have to loop through all elements of that object

var ps = document.getElementsByClassName("items");
for (const p of ps) {
  p.innerHTML = p.innerHTML.replace(/\//g, function(match) {
    return "<i style=color:tomato;font-weight:bold>" + match + "</i>"
  })
}

<p class="i  items">A/B </p>
<p class="i  items">C</p>
<p class="i  items">C/E</p>

edited Nov 23 '22 at 22:13

answered Nov 23 '22 at 22:09

Konrad

21,590
4
28
64

I think my regex might be wrong as it doesn't change the color of / – Smt Nov 23 '22 at 22:12
Fixed the regex – Konrad Nov 23 '22 at 22:13

Change color of all special char / using JS

1 Answers1