为什么只显示最后一个字符的高亮


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>

    <head></head>
    <body>
 
<div id="content">
    <article id="content">
    <p>确认过眼神 我遇上对的人</p>
    <p>我策马出征 马蹄声如泪奔</p>
    <p>青石板上的月光照进这山城</p>
    <p>我一路的跟 你轮回声 我对你用情极深</p>
    <p>洛阳城旁的老树根</p>
    <p>像回忆般延伸你问</p>
    <p>经过是谁的心跳声</p>
    <p>我拿醇酒一坛饮恨</p>
    <p>你那千年眼神是我</p>
    <p>醉醉坠入赤壁的 伤痕</p>
    <p>确认过眼神 我遇上对的人</p>
    </article>

</div>                      
        <input type="button" id="button" value="highlight" onclick="show()"/ >
<script language="javascript">




var content =document.getElementById('content');
var contents = content.innerHTML;
var keyword = ["确认","我" ];

 function show() {
     for (var j = 0; j < keyword.length; j++) {
         var value=keyword[j];
         var values = contents.split(value);
 content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
 }
}

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

img

用正则


        var content = document.getElementById('content');
        var contents = content.innerHTML;
        var keyword = ["确认", "我"];
        var re = new RegExp('(' + keyword.join('|') + ')', 'ig')
        function show() {
            content.innerHTML = contents.replace(re, '<span style="background:red;">$1</span>')
        }

或者下面的



        var content = document.getElementById('content');
        var contents = content.innerHTML;
        var keyword = ["确认", "我"];
        function show() {
            for (var j = 0; j < keyword.length; j++) {
                var value = keyword[j];
                var values = contents.split(value);
                //var values = contents.split(value);
                contents = values.join('<span style="background:red;">' + value + '</span>');//更新contents变量值，要不上面的代码contents没有更新只会替换最后的一个关键字
                content.innerHTML = contents
            }
        }

有帮助请【采纳该答案】，谢谢~~


var content = document.getElementById('content');
            var keyword = ["确认", "我"];

            function show() {
                for(var j = 0; j < keyword.length; j++) {
                    var contents = content.innerHTML;
                    var value = keyword[j];
                    var values = contents.split(value);
                    console.log(values)
                    content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
                }
            }