浅谈JavaScript实现关键字文本高亮显示

蔚落 2022-06-17 03:29 253阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    	</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>

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关 spring data solr实现关键字搜索+高亮显示+分组查询

文章目录配置文件schama.xml 普通查询(关键代码) 高亮查询（关键代码）分组查询（关键代码）配置文件schama.xml !

男娘i/ 2023年06月13日 04:56/ 0 赞/ 83 阅读

相关 Javascript高亮显示搜索结果

[Tedpavlic][]创建了一个非常容易理解和有用的客户端站点javascript高亮显示。在这里，我简要介绍如何使用它，请访问上面的网站以获取详细信息 1）包括以下

以你之姓@/ 2023年02月15日 05:30/ 0 赞/ 51 阅读

相关 Vue 实现检索关键字高亮

需求：检索列表，匹配搜索关键字部分高亮首先判断返回字符中是否包括该关键字，如果包括则进行样式修改。效果图： ![watermark_type_ZmFuZ3poZW5n

电玩女神/ 2022年11月07日 13:19/ 0 赞/ 301 阅读

相关浅谈JavaScript实现关键字文本高亮显示

<!DOCTYPE html> <html> <head> </head> <body> <div id="conte

蔚落/ 2022年06月17日 03:29/ 0 赞/ 254 阅读

相关 PHP对关键字进行高亮显示

一代码 1. `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"` 2. `"http://

比眉伴天荒/ 2022年05月11日 22:50/ 0 赞/ 329 阅读

相关 jq利用replace()方法实现关键字高亮显示

//1.获取要高亮显示的行 var rowNode = $('.highlightRow'); //2.获取搜索的内容 var searchCo

秒速五厘米/ 2022年04月03日 08:10/ 0 赞/ 416 阅读

相关原生Js 两种方法实现页面关键字高亮显示

![07121543-0bd8f559e8b546aaa45b59ff1c2d0d25.jpg][] 上网看了看别人写的，不是兼容问题就是代码繁琐，自己琢磨了一下用两种方法都

旧城等待，/ 2022年03月31日 04:28/ 0 赞/ 325 阅读

相关 js实现关键字高亮

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>j

约定不等于承诺〃/ 2021年12月22日 06:11/ 0 赞/ 453 阅读

相关 js实现关键字匹配高亮显示

需求：用户输入文字之后，调用后台接口查询匹配关键字（模糊搜索），并把匹配到的关键字进行高亮显示。实现思路：将拿到的数据进行拆分，例如：用户输入“羽毛球“，接口返回数据...

你的名字/ 2021年01月19日 17:30/ 0 赞/ 1110 阅读

相关 solr搜索关键字高亮显示

solr搜索关键字高亮显示主要步骤: 后端: 1.高亮选项初始化 HighlightQuery query=new SimpleHighlightQuery(); H...

朱雀/ 2020年10月24日 00:23/ 0 赞/ 1027 阅读