js实现关键字高亮

约定不等于承诺〃 2021-12-22 06:11 332阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>js关键字高亮显示</title>
    	</head>
    	<body>		  
            <input type="text" id="text" placeholder="请输入关键字"/>                            
            <input type="button" id="button" value="确定"/>  
            <br />
            <br />
            <div id="content">  
                	你好呀！
            </div>
            <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); 
    　　　　　　　　　　//使用js中array的join方法，将带有样式的关键字作为拼接数组中所有元素 
                     content.innerHTML = values.join('<span style="background:green;">' + value + '</span>');  
                 };  
            </script>  
    	</body>
    </html>

转载于:https://www.cnblogs.com/yixtx/p/8659804.html

发表评论取消回复

表情：

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

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

相关阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 135 阅读

相关 react字符串匹配关键字高亮

const sqlstring = ["ADD","ALL","ALTER","ANALYZE","AND","AS","ASC","ASENSITIVE","BEFO

╰半夏微凉°/ 2022年12月08日 04:23/ 0 赞/ 138 阅读

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

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

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

相关 js实现搜索字高亮

<script type="text/javascript"> //<!\[CDATA\[ //--------begin function fHl(o, f

谁践踏了优雅/ 2022年05月28日 05:45/ 0 赞/ 169 阅读

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

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

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

相关 JEditorPane实现关键字代码高亮效果

首先感谢博客：[https://blog.csdn.net/jsrookie/article/details/84021831][https_blog.csdn.net_jsr

- 日理万妓/ 2022年01月06日 02:17/ 0 赞/ 306 阅读

相关 js实现关键字高亮

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

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

相关关键字高亮查询

1.1.1 需求分析所谓高亮，就是使用特别的样式修饰某字段中包含的搜索关键字。需求：实现搜索高亮，商品名称使用红色显示搜索关键字。 1.1.2实现思路使用

朱雀/ 2021年12月05日 05:21/ 0 赞/ 312 阅读

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

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

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

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

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

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