JS查找替换内容,并高亮显示查找替换内容

原创 170阅读 · 时间2019年3月20日 18:06

我现在这个项目,需要实现页面内容的替换功能。Django后端的替换是非常容易啊,但是前端实时并高亮显示就把我难到了。


后端;

循环内容,进行匹配,有匹配到就进行替换,并且存到数据库中。


前端:

JS循环获取页面中指定的内容,进行与要匹配项进行替换,匹配和替换完成后渲染给HTML页面。

再加上我的内容是在表格中,且每个ID值都不一样,所以我还要先获取每一行的指定列的内容,再进行替换处理。


先来一个普通的代码示例:

<!--<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><input type="text" id="t1"><input type="submit" value="查找"></p>
<p><input type="text" id="t2"><input type="submit" value="替换" onclick='tihuan()'></p>
<div id="comment1">
    做梦的穷人每天上午11点,都会有一辆耀眼的汽车穿过纽约市的中心公园。
</div>
<hr>
<div id="comment2">
    车里除了司机,还有一位主人–无人不晓的百万富翁。
</div>
<script text="javaScript">
    function tihuan(){
	var Ot1 = document.getElementById("t1").value;
	var Ot2 = document.getElementById("t2").value;
	for(i=1;i< rows.length;i++)
        {
            var count = document.getElementsByClassName('comment'+i)[0].innerHTML;
            var n = count.split(Ot1).join("<font color='red'>" + Ot2 + "</font>");
            document.getElementsByClassName('comment'+i)[0].innerHTML = n;
        }
	}
</script>
</body>
</html>


因为我的项目是在表格中,且ID值不固定无从计数。需要先获取表格中的行和列,再得到其中的值。

获取页面中表格的行和指定列内容JS代码:

var tab = document.getElementById("history_income_list"); //找到这个表格, history_income_list是表格的ID
var rows = tab.rows; //取这个table下的所有行
for(i=0;i< rows.length;i++){
    var count = rows[i].cells[0];
  console.log(count) // 打印出:表格中每一行的第一列的内容


综上,我在项目中结合两者的最终代码:

<table id="history_income_list" class="table table-striped table-bordered table-hover table-responsive">
    <tbody>
    <tr class="active">
        <th>句段</th>
        <th class="yuanwen">原文栏</th>
        <th>状态</th>
        <th class="yiwen">译文栏</th>
        <th>MT选择</th>
        <th>提交</th>
    </tr>
                
    <tr data-uid="1">
        <td>1</td>
        <td id="yuanwen" class="yuanwen" name="yuanwen" style="text-align: left;">
        <a href="javascript:void(0);" style="display: none;" class="change_befor" onclick="change_befor(131)" id="change_befor131"><i class="jb" id="jb131"></i></a>
        <a href="javascript:void(0);" style="display: none;" class="change_old" onclick="change_old(131)" id="change_old131"><i class="jb-old" id="jb_old131"></i></a>
        <div class="textarea yuanwen_change" id="yuanwen_change131" contenteditable="true" onblur="yuanwen_change(131)">User模块</div>
        </td>
        <td hidden="hidden">131</td>
        <td id="yiwen" class="yiwen" style="text-align: left;">
            <div class="textarea yiwen_change" id="yiwen_show131" contenteditable="true" onblur="yiwen_change(131)">User module</div>
        </td>
        <td>
           <a href="javascript:void(0);" id="click">百度翻译</a>
           <a href="javascript:void(0);" id="sgclick">搜狗翻译</a>
        </td>
           <td><a class="button btn btn-default" id="submits">提交</a></td>
    </tr>      
    </tbody>
</table>

<script>
  var Ot1 = document.getElementById("yuan").value;    // 获取要被替换的原文
    var Ot2 = document.getElementById("tihuan").value;    // 获取要被替换的值
    var tab = document.getElementById("history_income_list"); //找到这个表格
    var rows = tab.rows; //取得这个table下的所有行
    for(i=1;i< rows.length-1;i++){
    var count = rows[i].cells[1].getElementsByClassName('yuanwen_change')[0].innerHTML;
    var n = count.split(Ot1).join("<font color='red'>" + Ot2 + "</font>");
    rows[i].cells[1].getElementsByClassName('yuanwen_change')[0].innerHTML = n;
    }
</script>

基本上就是这样子。评论或问答区交流!


评论

本站升级中... 如有好的建议请加入QQ群!

相关文章推荐 ?
近七日热文推荐 !
回到顶部