jquery搜索关键词高亮效果

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了搜索关键词高亮效果。

这样的效果在实际应用中非常多见,主要为了突出关键词的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.highlight {
  background-color: #f00;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
function highlight(text, words, tag) {
  tag = tag || 'span';
  var index, len = words.length,
    reg;
  for (index = 0; index < len; index++) {
    reg = new RegExp(words[index], 'g');
    if (reg.test(text)) {
      text = text.replace(reg, '<' + tag + ' class="highlight">$&</' + tag + '>');
    }
  }
  return text;
}
 
function unhighlight(text, tag) {
  tag = tag || 'span';
  var reg = new RegExp('(<' + tag + '.+?>|<\/' + tag + '>)', 'g');
  return text.replace(reg, '');
}
$(document).ready(function() {
  $('.btn').click(function(event) {
    var str = $(".search").val();
    var strArr = [];
    str = str.trim(); //去掉两端空格
    if (str === "") {
      alert("关键字为空");
      return false;
    } else {
      //支持多词
      if (str.split(" ").length != 1) {
        strArr = str.split(" ");
      } else {
        strArr.push(str);
      }
    }
    //console.log(strArr);
    $('#box').html(unhighlight(
      $('#box').html(),
      'strong'
    ));
    $('#box').html(highlight(
      $('#box').html(),
      strArr,
      'strong'
    ));
  });
}) 
</script>
</head>
<body>
  <div>
    <input type="text" class="search">
    <button class="btn">搜索</button>
  </div>
  <div id="box">本站的url地址是<a href="http://www.pipipi.net" target="_blank">www.pipipi.net</a></div>
</body>
</html>

jquery搜索关键词高亮效果,这样的场景在实际项目中还是用的比较多的,关于jquery搜索关键词高亮效果就介绍到这了。

jquery搜索关键词高亮效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容