搜索关键飘红怎么用js设置？

Question

问题描述

搜索关键字结果飘红
如：搜索 12333

结果显示 所有的123.。1233变红

问题出现的环境背景及自己尝试过哪些方法

用js取值 然后用正则替换

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html代码
<form method="get" action="?">

<img src="/images/logo.png" class="sherder1_1" />
<div class="sherder1_2">
    <select name="typ" class="sherder1_2_1">
      <option value="1" <?php if ($typ == 1) {echo "selected";} else {echo "";} ?>>文章</option>
      <option value="2" <?php if ($typ == 2) {echo "selected";} else {echo "";} ?>>学校</option>
      <option value="3" <?php if ($typ == 3) {echo "selected";} else {echo "";} ?>>专业</option>
    </select>
    <input name="q" value="<?php echo $q;?>" id="text" type="text" class="sherder1_2_2" />
</div>
<input type="submit" id="button" class="sherder1_3" value="搜 索" />

</form>

<div class="sherder2" id="content">
加载PHP内容。主要是网页链接
</div>

js代码
<script>
var search_word = document.getElementById("text").value;

var reg = new RegExp("(" + search_word + ")", "g");
var content = document.getElementById("content").innerHTML;
var sc= content.replace(reg,"<span color='red' >$1</span>")

</script>

你期待的结果是什么？实际看到的错误信息又是什么？

期待搜索结果变红，但是js代码没有效果，想知道哪里写错了？

Answer 1

原先用jquery实现的代码，相比之下你替换内容之后，并没有把替换后的内容放过去
$(function(){

    var searchText = "{$keyword}";  
    var regExp = new RegExp(searchText, "g");  
    $("p").each(function(){  
        var html = $(this).html();  
        var newHtml = html.replace(regExp, "<strong class='search-keyword'>"+searchText+"</strong>");
        $(this).html(newHtml);
    });
    

    });