javascript - 使用 DOM 在子字符串上应用 CSS

Question

这是我使用 ":"拆分字符串的 JS 代码。所以一个字符串由:

习惯 #1:您是否建立了专门的商业支票账户？

会 split 成:

[0]=习惯 #1 和 [1]=您是否开设了专门的商业支票账户？

现在我想将 CSS 应用到 [0]。

 titles=document.getElementsByClassName("title");    
            for(var i=0;i<titles.length;i++){
            titles[i].innerHTML.split(":")[0].style.cssText="color:aqua;";
            }

你们对现有代码有什么修改建议吗？

Answer 1

您可以像这样替换字符串的第一部分:

var titles=document.getElementsByClassName("title");
for(var i=0;i<titles.length;i++){
    var blueFoo = titles[i].innerHTML.split(":")[0];
    var text = titles[i].innerHTML;
    var newHTML = text.replace(blueFoo,'<span style = "color:blue">' + blueFoo + '</span>');
    titles[i].innerHTML = newHTML;
        }