javascript如何替换一个标签里面的多处字符串，并展示在页面上

David_Zhou

581026

发布于
2016-08-03

Dont

7k3470102

更新于
2016-08-03

现在页面上有一组标签，类似下面这样的

    <body>
        <p>我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。</p>
        <p>我只是一个标签</p>
        <p>我只是一个标签</p>
    </body>

现在已知一组数据，如下所示：

[
    {
        "bgColor": "#ffff66",
        "startNum": 10,
        "endNum": 15,
        "tagNum": 1,
        "text": "以在这里面"
    },
    {
        "bgColor": "#ccc",
        "startNum": 3,
        "endNum": 8,
        "tagNum": 1,
        "text": "个p标签，"
    }
]

这组数据中各个字段的意思如下：
tagNum：表示在当前页面下，也就是在body下面的第几个标签
startNum：表示这个标签里面的一段文字的开始位置
endNum：表示这个标签里面的一段文字的结束位置
text：表示这个标签中需要匹配的内容
bgColor：表示需要替换的文字外围的标签颜色

最终希望得到的效果如下所示：

    <body>
        <p>我是一<span class="color: ccc">个p标签</span>，我可<span class="color: ffff66">以在这里面</span>写很多字。我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。</p>
        <p>我只是一个标签</p>
        <p>我只是一个标签</p>
    </body>

多谢各位的解答

javascript

阅读 5.9k

5 个回答

得票最新

Dont

7k3470102

发布于
2016-08-03

题主是新手吧，贴代码的时候记得空首行跟尾行并补上三个【`】（忽略【】）
补一下我简单的思路（有bug~）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。我是一个p标签，我可以在这里面写很多字。</p>
    <p>我只是一个标签</p>
    <p>我只是一个标签</p>
    <script type="text/javascript">
        var data = [{
            "bgColor": "#ffff66",
            "startNum": 10,
            "endNum": 15,
            "tagNum": 1,
            "text": "以在这里面"
        },
        {
            "bgColor": "#ccc",
            "startNum": 3,
            "endNum": 8,
            "tagNum": 1,
            "text": "个p标签，"
        }];

        var doms = document.body.childNodes;
        //过滤掉 text文本节点
        doms = [].filter.call(doms,function(e,i){
            if(e.nodeType!=1){
                return false;
            }
            return true;
        });
        //第一次遍历 给 p标签文本加上要加样式标签的标志
        data.map(function(e,i){
            var currentDom = doms[e.tagNum-1];

            var allText = currentDom.innerText;

            var textArr = [];
            textArr[0] = allText.substring(0, e.startNum);
            //这一段就是你要加样式的文本
            textArr[1] = allText.substring(e.startNum, e.endNum);
            textArr[2] = allText.substring(e.endNum, allText.length);
            
            //得到文本后，给加上位置标识，用的是字符串替换（为什么不直接补上样式呢？发现你的数据可能对着同一个标签做处理，提前补上的话，前面的处理可能被后面的冲掉了【只是临时个人见解】）
            textArr[1] = textArr[1].replace(e.text, function(all){
                return '{start'+i+'}'+all+'{end'+i+'}';
            });
            //替换完填回原处
            currentDom.innerText= textArr.join('');
            return e;
        }).forEach(function(e,i){
            //再来一次遍历，这次是对那些标识改成样式了
            var currentDom = doms[e.tagNum-1];
            
            var allHtml = currentDom.innerHTML;
            currentDom.innerHTML = allHtml.replace('{start'+i+'}','<span style="background-color:'+e.bgColor+'">')
                .replace('{end'+i+'}',"</span>");
        });
//PS: 这里只是提供一个思路，代码还有个bug，就是后面的匹配获取文本的时候，计算位置可能不对。怎么解决，你想想？

    </script>
</body>
</html>

var data = [{
    "bgColor": "#ccc",
    "startNum": 3,
    "endNum": 8,
    "tagNum": 1,
    "text": "个p标签，"
    },
    {
    "bgColor": "#ffff66",
    "startNum": 10,
    "endNum": 15,
    "tagNum": 1,
    "text": "以在这里面"
}];

data.sort(function(a,b) {
    return b.startNum - a.startNum
});//从后往前排序开始位置

var body = $('body');
for(var i = 0; i < data.length; i++){
    var element = $(body).find('*')[data[i].tagNum - 1],
        text = $(element).html(),
        newText = '<span class="'+data[i].bgColor+'">'+data[i].text+'</span>';
    $(element).html(text.slice(0,data[i].startNum)+newText+text.slice(data[i].endNum, -1))
}

===========新手回答，见笑了============

Daz

293428

发布于
2016-08-03

var data=[
            {
                "bgColor": "#ffff66",
                "startNum": 10,
                "endNum": 15,
                "tagNum": 1,
                "text": "以在这里面"
            },
            {
                "bgColor": "#ccc",
                "startNum": 3,
                "endNum": 8,
                "tagNum": 1,
                "text": "个p标签，"
            }
        ];
        for(key in data){
            var target=document.body.children[data[key].tagNum-1].innerHTML;
            var str="<span class='color:" + data[key].bgColor +"'>" + data[key].text + "</span>";            
            target=target.replace(target.substring(data[key].startNum,data[key].endNum),str);        
            document.body.children[data[key].tagNum-1].innerHTML = target;
        }

cheris

101248

发布于
2016-08-03

如果这样的用法少的话按楼上的方法
如果有很多这样的建议用个模板引擎

artTemplate

underscore.template

jquery.template

个人推荐第一种，我喜欢小的好用的，讨厌让代码多1k没用的；underscore的也不错，jquery的据说性能最差

chinaguopeng

发布于
2020-04-27

新手上路，请多包涵

    var obj = str.split("");
    for(var i = 0;i<replaceStr.length;i++){
        obj[replaceStr[i].start] = "<span style='color:#ff0000'>"+obj[replaceStr[i].start]
        obj[replaceStr[i].end] = obj[replaceStr[i].end]+"</span>"
    }
    str = obj.join('')

把字符串转成数组，把要做的改变对数组修改，再把数组转陈字符串，就不会有错位了

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

javascript如何替换一个标签里面的多处字符串，并展示在页面上

你尚未登录，登录后可以

为什么js的AES的加密每次得到的结果都不一样，并且无法在后端被java正常解密呢？

使用 codex 的时候，经常出现 reconnecting 是因为自己的网络不好还是 gpt 那边太繁忙了？

JavaScript里面的array.map方法是干嘛的？

PHP开发游戏需要具备那些技术能力？

JavaScript 中 WeakMap 和 WeakSet 的实际使用场景是什么？

如何根据产品各个角度图片组成的360°旋转效果展示？

电脑端-无障碍开发-检查页面无障碍存在的问题？