jQuery.Mark高亮显示关键词_JS搜索结果中高亮插件

jQuery.Markj是一个关键字文本高亮的插件、一款支持变音符号的脚本、可自定义同义词、自定义元素、自定义class名称、单词边界和iframe、它可以通过搜索的方式来高亮所有的指定关键字、非常适合搜索等场景、效果非常不错、效果图如下

CSS代码

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
    body {
      margin: 15px;
    }

    div.search span,
    div.search input[name="keyword"] {
      display: block;
    }

    div.search input[name="keyword"] {
      margin-top: 4px;
    }

    div.panel {
      padding: 1em 12em;
      margin-bottom: 15px;
    }
    div.panel-body p{
        text-indent: 2em;
    }

    span.match {
      background: yellow;
      color: black;
    }
</style>

JS代码

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dist/jquery.mark.min.js"></script>
<script type="text/javascript">
    $(function() {

      var mark = function() {

        // Read the keyword
        var keyword = $("input[name=´keyword´]").val();

        // Determine selected options
        var options = {
          "className": "match"
        };
        $("input[name=´opt[]´]").each(function() {
          options[$(this).val()] = $(this).is(":checked");
        });

        // Mark the keyword inside the context
        $(".context").removeMark();
        $(".context").mark(keyword, options);
      };

      $("input[name=´keyword´]").on("keyup", mark);
      $("input[type=´checkbox´]").on("change", mark);

    });
</script>

jQuery.Mark关键词高亮源代码下载链接: jQuery 关键词高亮 密码: gss1