当前位置: 首页 > news >正文

jquery highlight高亮插件下载

网上大多数给的highlight.js文件都不正确,给的都是代码高亮插件,而不是文本高亮显示插件,用起来就会报错:

.highlight is not a function

正确方法:

去官网下载js文件: jQuery Highlight Plugin | bartaz @ GitHub
下拉到底部的Where to get it?位置下载。

我现在用的是: http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js


把这个js文件引用到你的html文件,然后加上样式:

<style>
	.highlight {background-color: #FFFF88; }
</style>

接着只需要js像这样:$("h1").highlight("highlight"); 就可以高亮搜索文本了。

下面是一个完整实例:

<!DOCTYPE html>
<html>
  <head>
    <title>regex.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../jquery/jquery-1.11/jquery.min.js"></script>
  	<script type="text/javascript" src="../jquery/jquery-highlight/jquery-hightlight.js"></script>
  	<style>
  		.highlight {background-color: #FFFF88; }
  	</style>
  	<script>
  		$(function(){
  			$('#search').click(function(){
  				var key = $('#key').val();
  	  			if(key != undefined && key.length > 0) { //注意要判断key是否为undefined
  	  				var body = $('#body');
  	  				body.removeHighlight();
  	  				body.highlight(key);
  	  			} else {
  	  				alert("请输入关键字!")
  	  			}
  			});
  		});
  	</script>
  </head>
  <body>
  	<div>
  		<input id="key" type="text">
  		<input id="search" type="button" value="搜索">
  	</div>
    <div id="head">
    	This is a test head!
    	<div>
    		input the search key.
    	</div>
    	<div>
    		click "搜索" button.
    	</div>
    </div>
    <h1>如下是搜索区域!</h1>
    <div id="body">
    	This is a test body!
    	<div>
    		This is a test, a test, test, tes, te, t!
    		Do you know and listen this test, I think you don't know this test!
    	</div>
    	<div>
    		这是一个简答的测试,测试.
    		<p>你知道或者听过这个测试吗,我认为你没有听过这个测试!</p>
    	</div>
    	<div>
    		This is a test, a test, test, tes, te, t!
    		I know't know this test, yes, this test is a not famous test!
    		<p>Follow me test, to test the test! I don't know what do you say?</p>
    	</div>
    	<div>
    		<div>
	    		这是一个简答的测试,测试.
	    		我不知道这个测试,是的,这不是一个注明的测试,
	    		<span>跟随我,去测试这个测试,我都不知道我在说什么!</span>
    		</div>
    	</div>
    	<div>
    		What do you say? test, only a test?
    		<p>你们说什么呢?测试,一个测试?</p>
    	</div>
    </div>
  </body>
</html>

相关文章:

  • 笔记本电脑彻底删除硬盘数据
  • win10安装跳过创建Microsoft账户
  • 解决 Caused by: org.hibernate.HibernateException: Access to DialectResolutionInfo cannot b
  • springboot vue配置跨域访问
  • 解决 [WARNING]: Console output during zsh initialization detected.
  • 解决 vue ui 白屏
  • everything的安装后初始设置
  • Windows 安装vue配置
  • Could NOT find resource [logback-test.xml]
  • setSerializationInclusion(JsonInclude.Include.NON_NULL) 没有作用
  • mac查看电脑安装了多少个jdk
  • vue-cli-service: command not found
  • 1067 - Invalid default value for 的原因之一
  • The database returned no natively generated identity value
  • 让elementui upload组件 不显示上传列表
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • eclipse的离线汉化
  • GitUp, 你不可错过的秀外慧中的git工具
  • httpie使用详解
  • Koa2 之文件上传下载
  • PHP面试之三:MySQL数据库
  • VUE es6技巧写法(持续更新中~~~)
  • win10下安装mysql5.7
  • Yii源码解读-服务定位器(Service Locator)
  • 分布式熔断降级平台aegis
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 七牛云假注销小指南
  • 思考 CSS 架构
  • 线性表及其算法(java实现)
  • 译有关态射的一切
  • Prometheus VS InfluxDB
  • 没有任何编程基础可以直接学习python语言吗?学会后能够做什么? ...
  • 浅谈sql中的in与not in,exists与not exists的区别
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (附源码)计算机毕业设计高校学生选课系统
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (十三)Java springcloud B2B2C o2o多用户商城 springcloud架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)...
  • (万字长文)Spring的核心知识尽揽其中
  • (一)SpringBoot3---尚硅谷总结
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转)详解PHP处理密码的几种方式
  • .NET MVC第三章、三种传值方式
  • .NET牛人应该知道些什么(2):中级.NET开发人员
  • .NET设计模式(7):创建型模式专题总结(Creational Pattern)
  • @Builder用法
  • [2016.7 test.5] T1
  • [CSS]CSS 字体属性
  • [EFI]Atermiter X99 Turbo D4 E5-2630v3电脑 Hackintosh 黑苹果efi引导文件
  • [error] 17755#0: *58522 readv() failed (104: Connection reset by peer) while reading upstream
  • [FxCop.设计规则]8. 也许参数类型应该是基类型
  • [JS7] 显示从0到99的100个数字
  • [LeetCode周赛复盘] 第 312 场周赛20220925
  • [NSSRound#16 Basic]RCE但是没有完全RCE