JavaScript简单实现关键字文本搜索高亮显示功能示例
本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS关键字文本高亮</title>
</head>
<body>
<div id="content">
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
</div>
<input type="text" id="text" placeholder="请输入关键字"/>
<input type="button" id="button" value="确定"/>
<script>
var content = document.getElementById("content");
var contents = content.innerHTML;
var text = document.getElementById("text");
var button = document.getElementById("button");
button.onclick = function() {
var value = text.value;
var values = contents.split(value);
content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
};
</script>
</body>
</html>
使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：
另：此处是采用button按钮点击实现的搜索高亮显示，小编在此基础上稍作修改，给出一个实时显示文本搜索的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS关键字文本高亮</title>
</head>
<body>
<div id="content">
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
</div>
<input type="text" id="text" placeholder="请输入关键字"/>
<script>
var content = document.getElementById("content");
var contents = content.innerHTML;
var text = document.getElementById("text");
text.onkeyup= function() {
var value = text.value;
var values = contents.split(value);
content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
};
</script>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript网页关键字高亮代码
//高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/
-
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>
-
JavaScript实现关键字高亮功能
高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head>中引入下面javascript方法: 复制代码 代码如下: <script type="text/javascript"> //<
JavaScript正则方法replace实现搜索关键字高亮显示
前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍 正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数
-
用JS将搜索的关键字高亮显示实现代码
用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.
-
angularjs实现搜索的关键字在正文中高亮出来
1.定义高亮 filter 我们希望搜索的关键字在正文中高亮出来,正文内容就是过滤器的第一个参数,第二个参数就是搜索关键字,这样,我们的过滤器将会有两个参数了. 高亮的原理很简单,将需要高亮的内容使用 span 标记隔离出来,再加上一个高亮的 class样式 进行描述就可以了. app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: &quo
-
JavaScript简单实现关键字文本搜索高亮显示功能示例
本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
JavaScript实现的搜索及高亮显示功能示例
本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉 效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea
-
jQuery实现的导航条点击后高亮显示功能示例
本文实例讲述了jQuery实现的导航条点击后高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery导航条点击后高亮显示</title> <script src="http://libs.baidu.com/jq
-
java实现简单的英文文本单词翻译器功能示例
本文实例讲述了java实现简单的英文文本单词翻译器功能.分享给大家供大家参考,具体如下: 直接上代码: package fanyi; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStreamReader;
-
JavaScript简单实现的仿微博留言功能示例
本文实例讲述了JavaScript简单实现的仿微博留言功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博留言</title> </head> <script> window.onload=function(){ var text=docum
-
Django 简单实现分页与搜索功能的示例代码
假设现有需求如下: 需要一个页面分页展示信息,在该页面添加搜索框以提供检索功能. 那么,我们知道,展示信息和检索功能是在同一个页面,也就是共用一个路由. 代码如下: 第一步,写路由:为了清晰,这里只给出主页和展示页面的路由. urls.py: from django.urls import path from . import views from django.conf.urls.static import static from django.conf import settings fro
-
Android 搜索结果匹配关键字且高亮显示功能
1. 单关键字 匹配 如果只是单关键字的话,那么我们先计算出他的下标,它的长度,然后就可以标记下标到下标+长度的这一段为特殊颜色即可,代码如下: if (name != null && name.contains(keyWord)) { int index = name.indexOf(keyWord); int len = keyWord.length(); Spanned temp = Html.fromHtml(name.substring(0, index) + "<
-
JS实现静态页面搜索并高亮显示功能完整示例
本文实例讲述了JS实现静态页面搜索并高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <body> <input id="key-word" class="k
-
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im