phpstudy集成环境

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

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

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

    <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>

多谢各位的解答

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

artTemplate

underscore.template

jquery.template

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

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;
        }

题主是新手吧，贴代码的时候记得空首行跟尾行并补上 三个【`】（忽略【】）
补一下我简单的思路（有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))
}

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

【热门文章】
【热门文章】