文本高亮显示jQuery插件

2013-09-02 03:11 ·Ab叔 1452 22 <- 点击左侧的数字“攒”一个吧

使用jquery扩展实现文本高亮显示，可用于搜索结果高亮显示、文章内搜索关键字的功能。

View demo      Download

1. 查找文字并高亮显示的jquery代码

$("div").highlight("搜索的文字", "高亮代码的样式表");

2. 去除高亮现实的代码

$("div").removeHighlight("高亮代码的样式表");


<!DOCTYPE html>
<html>
<head>
    <title>AB叔</title>
	<meta name="description" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.highlight-4.js"></script>
	<style>
	.searchWord{color: #dd4b39;}
	.searchWord2{background-color: yellow;}
	</style>
</head>
<body>
<div>

</div>
<INPUT TYPE="text" id="searchKey">
<INPUT TYPE="button" VALUE="搜索" ONCLICK="search()">
<INPUT TYPE="button" VALUE="取消高亮" ONCLICK="removehighlight()">

<script>
var highlightCss = "searchWord2";

function search(){
	if($("#searchKey").val()!=""){
		removehighlight();
		$("div").highlight($("#searchKey").val(), highlightCss);
	}
}
function removehighlight(){
	$("div").removeHighlight(highlightCss);
}
</script>
</body>
</html>