第一弹
萌猫导航

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

作者: 叶子 来源: 怪哈哈网 日期: 2016-09-28 14:47:16 人气: -

例如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);
        }
    }
}]);


转载请注明文章来源(欢迎分享): http://www.guaihaha.com/javascript/11101.html

怪哈哈动漫图库
关于怪哈哈
怪哈哈是一个集搞笑,美女,动漫,游戏,技术等为核心的综合性网站!
联系我们
商务洽谈、广告合作、友情链接、侵权举报,这些都可以联系我们哦!
关于我们 - 联系我们 - 广告服务 - 免责申明   
本站文字和图片均为严格审查筛选收藏,均收集整理于互联网,其著作权归原作者所有,如果有侵犯您权利的照片,请来信告知,我们将及时撤销相应文字和图片.
Copyright @2014-2020 怪哈哈网 All Rights Reserved.
【谢谢大家一直支持贵站】