AngularJS改变html中特定字符串的颜色

　　例如html内容为：“一九二五年创作的[[《伤逝》是鲁迅先生唯一一部反映青年男女爱情的小说。]]作者将一对青年的爱情故事放置到“五四”退潮后依然浓重的封建黑暗背景中，透过他们的悲剧命运寓示人们要将个性解放与社会解放结合起来，引领青年去寻求“新的生路”，[[具有深刻的历史意义。]]”

　　改变上述内容“[[]]”（“[[]]”为特殊标记）所包含的内容（即“《伤逝》是鲁迅先生唯一一部反映青年男女爱情的小说。”，“具有深刻的历史意义。”）的颜色，方法为采用正则表达式匹配所有需要改变颜色的字符串，在此基础上改变匹配字符串颜色，并将特殊标记替换为空字符。

js代码如下：

window.onload = function() {

　　//匹配所有字符串并改变其颜色，其中"/g"表示全局匹配
　　document.body.innerHTML = document.body.innerHTML.replace(/\[\[(.*?)\]\]/g, '<font color="#FF6600">$&</font>');

　　//特殊标记替换为空字符

　　document.body.innerHTML = document.body.innerHTML.replace(/\[|\]/g, '');
}

可能存在的问题：body.innerHTML会导致ng-click点击事件失效，解决办法为不采用body.innerHTML，而是对span或label的innerHTML单独设置颜色，代码如下：

    var stuAnswerList = document.getElementsByName("stuAnswer");
    for(var i = 0; i < stuAnswerList.length; i++){
        stuAnswerList[i].innerHTML = stuAnswerList[i].innerHTML.replace(/\[\[(.*?)\]\]/g, '<font color="#FF6600">$&</font>').replace(/\[|\]/g, '');
    }

或者采用ng-bind-html：

html：

<span id="stuAnswer" ng-bind-html="stuAnswer|stringKeyword"></span>

js：

app.filter("stringKeyword", ["$sce", function($sce) {
    return function(text) {
        if (text) {
            text = text.replace(/\[\[/g, "<span style=\"color: #FF6600;\">").replace(/\]\]/g, "</span>");
            return $sce.trustAsHtml(text);
        }
    }
}]);

转载于:https://www.cnblogs.com/ice-lolly/p/5817920.html