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

转载于:https://www.cnblogs.com/joyho/articles/3510388.html

javascript 查找文本并高亮显示相关推荐

如何为JavaScript选择文本编辑器
by Ayo Isaiah 通过Ayo Isaiah 如何为JavaScript选择文本编辑器 (How to choose a text editor for JavaScript) If you' ...
10个免费的javascript富文本编辑器（jQuery and non-jQuery）
本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介 Javascript富文本编辑器使我们添加. ...
顺序、二分查找文本数据
//顺序查找文本数据function seqSearch(arr,data) {for(var i=0;i<arr.length;i++){if(arr[i]==data){return i;} ...
如何用javascript获取文本框，下拉框，单选框的对应值或者将值赋给它们？雪原虎发布于：2007-10-22 00:32
如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...
android 富文本框架_五种JavaScript富文本编辑器，总有一款适合你
全文共2099字,预计学习时长4分钟也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
selenium查找文本_在Selenium中查找具有链接文本和部分链接文本的元素
selenium查找文本 Selenium中CSS定位器是一个基本概念,每个旨在使用Selenium执行自动化测试的测试人员都应该意识到这一点. 在Selenium中充分使用CSS定位器可以帮助您以更 ...
如何在iPhone和iPad上的Safari中在网页上查找文本
Sometimes it's tough to find specific information within a web page in Safari for iPhone or iPad. Lu ...
五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...

javascript 查找文本并高亮显示

javascript 查找文本并高亮显示相关推荐

最新文章

热门文章