javascript 查找文本并高亮显示

今天简单滴写了一个demo,简单地查找目标文本并且高亮显示。其主要用到了全局匹配和替换的方法，即：RegExp和replace

在其中遇到的一个问题是忘记了把改变了的html字符串重新写入到容器中，导致花费的时间较多，总算解决了问题。

下面贴出demo代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
<title></title>
<style>
    .highlight{
        background-color: yellow;
    }
</style>
</head>
<body>
    <input id="search" type="search">
    <input id="searchbtn" type="button" value="search">
    <div id="pretime">
        西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路
    </div>
<script>
String.prototype.Trim = function()
{//去空格
    return this.replace(/\s/gi,"")
}

function searchTarget(searchtext){//查找处理
    var reg = new RegExp(searchtext,"g");
    var objtext = document.getElementById("pretime").innerHTML;
    var sCurText;
    if(!reg.test(objtext)){//没找到
        alert(" can not find!");
        return;
    }
    else{//找到
        var prehtml = document.getElementById("pretime").innerHTML;//获取目标文本容器的HTML字符串
        var newinner = prehtml.replace(reg,'<span class="highlight">'+searchtext+'</span>')//处理HTML字符串，为目标文本加上样式，即替换对应的HTML结构
        document.getElementById("pretime").innerHTML = newinner;//把处理后的HTML字符串写回到容器中
    }

}

window.onload = function(){
    document.getElementById("searchbtn").onclick = function(){
        var searchtext = document.getElementById("search").value.Trim();
        searchTarget(searchtext);
    }
}
</script>
</body>
</html>

效果图：（从上面的head节点可以看出这是一个手机页面，但是里面的代码同样适用于PC端）

 

posted @ 2014-01-08 11:51  Joy Ho  阅读(6386)  评论(0)  编辑  收藏  举报