将段落文本更改为风格化跨度

Question

I'm trying to change paragraph text in a for each loop. This seems like a simple issue (specific to JS?). I'm new to this language, coming from Matlab and Java. Fiddle attached. Any help is appreciated.

https://jsfiddle.net/npkx3of4/1/

function myFunction() {
    var ps = document.getElementsByClassName('.test');
    for (var p of ps) {
        p = p.replace('a', '<span style="color:blue;">b</span>');
    }
    alert("Working?");
    return null;
}

Answer 1

1. getElementsByClassName('.test') should be getElementsByClassName('test') .

2. You should be assigning the result of replacing the innerHTML of the paragraph back to the innerHTML of the paragraph.

 function myFunction() { var ps = document.getElementsByClassName('test'); for (var p of ps) { p.innerHTML = p.innerHTML.replace('a', '<span style="color:blue;">b</span>'); } alert("Working?"); return null; }

 <h1>Test</h1> <hr> <p class="test">a</p> <button type="button" onclick='myFunction();'>Click Me!</button>

Answer 2

There isn't any need to add a period before the class name when using getElementsByClassName .

var ps = document.getElementsByClassName('test');

Select only the plain text content inside the element, then replace all the specified characters before rewriting the inner HTML.

...  
    for (var p of ps) {
        p.innerHTML = p.textContent.replaceAll('a', '<span style="color:blue;">b</span>');
    }
...