search

Home  >  Article  >  Web Front-end  >  How to filter HTML tags and highlight keywords with jQuery_jquery

How to filter HTML tags and highlight keywords with jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:46:371238browse

The example in this article describes how jQuery filters HTML tags and highlights keywords. Share it with everyone for your reference. The details are as follows:

jQuery implements web page keyword filtering effect. Define the text that needs to be filtered in JavaScript. Multiple definitions can be made, but you need to modify the JS code to an array, so that multiple different keywords can be filtered out. This example is just for you Demonstrates a basic function, please explore more filtering functions yourself.

The operation effect is as shown below:

The specific code is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>过滤HTML标签，重新补充关键词高亮</title>
<style>
body{font-size:9pt;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<script>
$(document).ready(function() {
  var keyword = "脚本之家";
  $("#keyword").html(function() {
    return $(this).text().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
  });
});
</script>
<body>
<div id="keyword">脚本之家成立于2006年，至立于奉献开源的精品学习型源代码，如果你喜欢脚本之家的话，请把我们网址加入收藏夹吧！</div>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS method to achieve neon text effect_javascript skillsNext article：JS method to achieve neon text effect_javascript skills

Related articles

See more