前端mark.js+highlight.js+小程序关键字关键词高亮

目录

微信小程序实现关键词高亮

使用mark.js插件实现富文本内容关键词搜索

highlight.js 语法高亮，让你的页面更美观~

博客园使用highlight.js对代码进行高亮，并实现自定义关键词高亮

调整代码块的背景颜色

下载Highlight.js

尝试修改highlight.pack.js文件内容

jQuery的 highlight.js 代码高亮插件的使用

1.官网

2.下载

3.highlight使用

3.1加载js

3.2设置高亮css及触发高亮

3.3示例代码

高亮显示搜索到的关键字-jquery.highlight.js的用法！

---

微信小程序实现关键词高亮

1.实现效果

2.实现原理
1.将搜索的值与列表中的每一项进行对比，如果那一项indexOf（搜索值）！=-1，则表示这项中含有该关键字，处理列表，为这一项设置相应的属性。
2.split将字符串和搜索值拆分成数组，循环数组。

3.实现代码

<view class="head flex-row">
  <view class="head_input">
    <image src="/img/search_icon.png" class="search_icon"></image>
    <input type="text" placeholder="搜索" placeholder-class="place_holder" bindinput="getValue" value="{{search}}"></input>
  </view>
  <view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="con">
  <view class="item" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}">
    <text wx:for="{{item.list}}" class="{{i0.set &&'ative'}}" wx:key="idx" wx:for-item="i0">{{i0.val}}</text>
  </view>
</view>

/* pages/jsCase/keyWordHight/index2.wxss */
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #fff;
}

.head_input {
  position: relative;
  flex: 1;
  margin-left: 12rpx;
}

.search_icon {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15rpx;
  width: 28rpx;
  height: 30rpx;
  padding-left: 23rpx;
}

.head input {
  height: 60rpx;
  padding-left: 75rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background: #F5F5F5;
}

.place_holder {
  font-size: 28rpx;
  color: #999999;
}

.sha_icon {
  margin-left: 18rpx;
  font-size: 28rpx;
  color: #333333;
}

.con {
  padding-top: 90rpx;
  margin: 0 20rpx;
}

.item {
  border-bottom: 1rpx solid rgb(241, 239, 239);
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333333;
}

.item:last-child {
  border-bottom: none;
}

.ative {
  color: rgb(76, 156, 221);
}

// pages/jsCase/keyWordHight/index2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    search: "",
    filterList: [],
    list: [
      {
        name: " 上海"
      },
      {
        name: " 江苏"
      },
      {
        name: " 江苏南京"
      },
      {
        name: " 江苏宿迁"
      },
      {
        name: " 江苏苏州"
      },
      {
        name: " 四川"
      },
    ]
  },
  getValue(e) {
    let val = e.detail.value;
    this.setData({ search: val })
    if (val.length > 0) {
      let arr = [];
      for (let i = 0; i < this.data.list.length; i++) {
        if (this.data.list[i].name.indexOf(val) > -1) {
          arr.push({ name: this.data.list[i].name })
        }
      }
      this.setData({ filterList: arr, }, () => {
        this.getHighlight(arr, val)
      })
    } else {
      this.setData({ filterList: [], })
    }
  },
  /**
 * 关键字高亮处理
 * @param { String } datalist - 文本
 * @param { String } val - 关键字
 */
  getHighlight(datalist, val) {
    datalist.forEach(item => {
      let textList = item.name.split("");
      let keyList = val.split("");
      let list = [];
      for (let i = 0; i < textList.length; i++) {
        let obj = {
          set: false,
          val: textList[i]
        }
        list.push(obj);
      };
      for (let k = 0; k < keyList.length; k++) {
        list.forEach(i0 => {
          if (i0.val === keyList[k]) {
            i0.set = true;
          }
        })
      }
      item.list = list;
    });
    this.setData({
      filterList: datalist
    })
  },
  clear_input() {
    this.setData({
      search: "",
      filterList: []
    })
  }
})

————————————————
版权声明：本文为CSDN博主「苏苏哇哈哈」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_48085286/article/details/122934632

使用mark.js插件实现富文本内容关键词搜索

需求：需要对加载在页面中富文本内容进行关键词搜索滚动定位，不能讲html、css等相关文本内容检索出来。
问题：开始自己写了简单的搜索，但是会将html内容检索并显示在页面上。
解决：使用了mark.js的插件。插件文档：https://markjs.io/

实现效果：

代码：

HTML：

      <div class="search-bar float-left">
        <input name="keyword" id="keyword" type="text" />
          <span class="search-btn" id="searchBtn">搜索</span>
        </div>
        <div class="search-result-wrap float-left">
          <span>共搜索到<em id="viewCount">0</em> / <em id="totalCount">0</em>个</span>
          <button type="button" id="preBtn">上一个</button>
          <button type="button" id="nextBtn">下一个</button>
          <button type="button" id="clearBtn">清空</button>
        </div>

        <div class="article-content" id="articleContent">显示富文本内容的容器</div>

JS：

<!-- 引入本地mark.js，该插件支持原生dom查找，也支持jQuery dom查找，有需要自行引入jQuery即可-->
<script src="../js/mark.js" type="text/javascript"></script>
<script>
      var searchIndex = 0; // 搜索的下标
      var searchLen = 0; // 搜索到的总个数
      $(document).ready(function() {
         // 执行查找跳转
        $('#preBtn').click(function(){
          jumpUp();
        });
        $('#nextBtn').click(function(){
          jumpDown();
        });
        $('#clearBtn').click(function(){
          jumpClear();
        });
        // 点击搜索按钮进行关键词查找
        $('#searchBtn').click(function(){
          var value = $('#keyword').val();
          if (value && value != '') {
            searchVal();
          } else {
            // 执行操作
          }
        });
      })；
      // 搜索
      function searchVal() {
        searchIndex = 0;
        searchLen = 0;
        var context = document.querySelector('#articleContent');
        var instance = new Mark(context);
        instance.unmark().mark($('#keyword').val());
        searchLen = document.querySelectorAll('mark').length;
        console.log($('mark').eq(searchIndex))
        // $('mark').eq(searchIndex).css('background', '#ffa44b');
        // $('mark').eq(searchIndex).siblings().css('background', '#ff0');
        $('mark').each(function(i){
          if (i == searchIndex) {
            $(this).css('background', '#ffa44b');
          } else {
           $(this).css('background', '#ff0')
          }
        });
        jump();
        $('#viewCount').text((searchLen == 0) ? 0 : (searchIndex + 1));
        $('#totalCount').text(searchLen);
      };
      
      // 搜索跳转
      function jump() {
        if (document.querySelector('mark') != null) {
          document.querySelectorAll('mark')[searchIndex].scrollIntoView({ block: 'center' });
        }
        $('#viewCount').text((searchLen == 0) ? 0 : (searchIndex + 1));
        $('#totalCount').text(searchLen);
         // 使用.eq()的方法查找修改背景的话，不能进行跨标签修改背景色，所以使用了.each()方法进行遍历
        // $('mark').eq(searchIndex).css('background', '#ffa44b');
        // $('mark').eq(searchIndex).siblings().css('background', '#ff0');
        $('mark').each(function(i){
          if (i == searchIndex) {
            $(this).css('background', '#ffa44b');
          } else {
            $(this).css('background', '#ff0')
          }
        });
      };
      
      //搜索上一个
      function jumpUp() {
        if (searchIndex > 0) {
            searchIndex--;
            jump()
        } else {
            layer.msg('已经到顶部了！');
        }
      };
      
      //搜索下一个
      function jumpDown() {
        if (searchIndex >= (searchLen - 1)) {
            layer.msg('已经到底部了！');
        } else {
            searchIndex++;
            jump();
        }
      };
      
      //清空搜索 
      function jumpClear() {
        searchIndex = 0;
        searchLen = 0;
        $('#viewCount').text((searchLen == 0) ? 0 : (searchIndex + 1));
        $('#totalCount').text(searchLen);
        // 其他操作
      };
</script>

作者：鸣悦_92
链接：https://www.jianshu.com/p/512dab46084a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

highlight.js 语法高亮，让你的页面更美观~

在网页开发过程中，经常会用到代码的展示，而不同颜色的代码，可以让页面看起来更直观，也更美观。

highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用，而且用起来炒鸡简单！

先来看看highlight.js的使用效果吧~

1、获取highlight.js库
官网地址：https://highlightjs.org/

点击Get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。

选好后点击下面的download按钮，下载，解压，文件结构如下：

styles目录下是所有的css样式，决定代码的颜色；highlight.pack.js为库文件，决定代码哪些部分会变高亮。

2、在html页面中引入js和css文件

<link rel="stylesheet" type="text/css" href="styles/docco.css"/>
<script src="highlight.pack.js"></script>

打开styles文件夹，里面有很多的css文件，这些文件可以更改代码的css样式，包括高亮的颜色和背景色(主题色)。想使用哪种样式只需要导入这个样式的css文件即可。

看不懂这些英文都代表的什么样式？官网中有各个css文件的效果展示：https://highlightjs.org/static/demo/，这里我选择的是docco.css文件，想要别的颜色自行更改~

3、加载highlight.js库

<script>
 hljs.initHighlightingOnLoad();
</script>

4、在<pre>和<code>标签中添加要高亮显示的代码

<pre><code class="SQL">
  SELECT 1 AS ID, '张三' AS NAME, '2019-01-01' AS birthday FROM dual UNION ALL 
  SELECT 2 AS ID, '李四' AS NAME, '2019-02-01' AS birthday FROM dual UNION ALL 
  SELECT 3 AS ID, '王五' AS NAME, '2019-03-01' AS birthday FROM dual 
  ORDER BY id
</code></pre>

原则上系统会自动检测你的代码的内容，不过如果你不放心的话，可以在<code>标签中用class属性指定语言类别，上面代码中指定为SQL语言。

如果你的代码里包含标签，记得将标签里的"<"换成"&lt"，把">"换成"&gt"喔~

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="styles/docco.css"/>
  <script src="highlight.pack.js"></script>
</head>
<body text='#000000'>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
  <center>
    <font size=5 color='#dd0000'><b> 不符合规范查询数</b></font>
  </center>
  <br />
  <table style='font-size:14px; text-align:center;' border='1' cellspacing='0' align='center'>
    <tr bgcolor='#F79646'>
      <th style='width:100px'>id</th>
      <th>SQL</th>
      <th style='width:200px'>采集时间</th>
    </tr>
    <tr>
      <td>1</td>
      <td align='left'>
        <pre><code class="SQL">
  SELECT 1 AS ID, '张三' AS NAME, '2019-01-01' AS birthday FROM dual UNION ALL 
  SELECT 2 AS ID, '李四' AS NAME, '2019-02-01' AS birthday FROM dual UNION ALL 
  SELECT 3 AS ID, '王五' AS NAME, '2019-03-01' AS birthday FROM dual 
  ORDER BY id
        </code></pre>
      </td>
      <td>2021-02-08 22:26:49</td>
    </tr>
    <tr>
      <td>2</td>
      <td align='left'>
        <pre><code class="SQL">
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',
  `system_level_product_id` int(11) NOT NULL COMMENT '一级产品ID',
  `role_name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '角色名',
  `role_type` int(11) NOT NULL DEFAULT '1' COMMENT '用来区分系统默认管理员角色和后续自定义角色(0:管理员角色，1:用户创建角色，2：后台展示角色)',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `flag` int(11) DEFAULT NULL,
  `position` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `role_change` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `position001` varchar(10) COLLATE utf8mb4_general_ci DEFAULT NULL,
  `first` varchar(10) COLLATE utf8mb4_general_ci DEFAULT NULL,
  `second01` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `third` varchar(10) COLLATE utf8mb4_general_ci DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `idx_system_level_product_id` (`system_level_product_id`),
  KEY `idx_role_change` (`role_change`)
        </code></pre>
      </td>
      <td>2021-02-08 22:30:43</td>
    </tr>
  </table>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「心。晴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jingjing217/article/details/113772766

博客园使用highlight.js对代码进行高亮，并实现自定义关键词高亮

看了网上那么多有关highlight.js的教程，自己还没学过JavaScript和CSS，硬是花了3天的时间，才终于弄出了自己想要的效果。一开始我的博客园代码高亮效果是这样的：

个人希望代码块能够实现下面功能：

1. 调整代码块的背景颜色
2. 更换代码高亮的风格
3. 能够自定义哪些关键字、类/结构体进行高亮

其中第三点并没有任何教程能够告诉我怎么做，但是经过一番折腾，我还是做到了。最终的效果如下：

接下来是配置的具体教程

回到顶部

调整代码块的背景颜色

虽然说Highlight.js只用三句JavaScript代码就可以实现最基本的高亮效果，但是选择的代码高亮风格还需要在理想的代码块背景上显示。比如说代码的字体默认颜色是白色的，但是很多代码块的背景色是白的导致看不到代码字体。所以还需要设置博客园的代码块背景颜色。

首先在博客园后台管理-设置中会看到，需要你发送邮件到contact@cnblogs.com申请Js权限

等待一段时间，申请成功后，在博客园后台管理-设置-页面定制CSS添加项目代码

.cnblogs-markdown pre code { 
    background-color: #23241f !important;
    color: #eee!important;
 }

.cnblogs-markdown code {  
    background-color:  important;
}

其中需要留意的是背景颜色和文本颜色属性的设置，背景色RGB是每个单色8位，即对应2个16进制位；文本色则是每个单色4位，对应1个16进制位。

如果连同镶嵌在语句的代码块都需要修改上色，则可以删去上面代码的第二个块。

回到顶部

下载Highlight.js

去官方网站：highlight.js

然后获取它的最新版本，选择自己需要的语言。

解压后，根据官网提供的风格展示，选择自己喜好的风格上传到博客园后台管理上。

如果你不需要自己定制某些功能的话，可以也把highlight.pack.js直接上传

然后在设置-页脚Html代码（设置-博客侧边栏公告）添加：

<link rel="stylesheet" href="https://files.cnblogs.com/files/username/style.css">
<script src="https://files.cnblogs.com/files/username/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

这里记得把你的username换成你的博客园ID，style换成选择的风格的文件名

第一次保存后理论上就可以看到代码高亮效果了。

回到顶部

尝试修改highlight.pack.js文件内容

初步打开该文件进行查看，发现里面把所有的代码都放进了同一行，还将变量用各种单字母命名，有可能是为了尽量减小文件的大小，也可能是为了防止人家去理解代码含义。

但如果其实仔细观察的话可以发现里面的代码是用来进行语法分析的。我们不需要关注里面的实现，只需要找到里面收纳的关键字类型、支持的原生类型进行修改/添加，就可以实现自定义了。

找到keyword部分可以自行修改默认支持的关键字集合

然后找到built_in部分可以修改默认支持的类名、结构体名或者函数名

literal部分则是默认的字面值

当然这些部分可能还不够用，比如C/C++还支持宏定义

如果想要给宏加上高亮的话，可以回去翻vs2015.css，寻找对应宏颜色的支持项。可以看到
 

可以在集合c添加variable项，然后用字符串的形式引入关键词。比如说这里我想要支持宏TRUE和FALSE，就可以这样添加：

c={...
...
...
variable:"TRUE FALSE"}, ...

如果想要支持枚举的话，也是跟刚才的操作一样。当然你也可以修改.css文件来做到支持。还有另一种办法是把风格css文件的代码添加到页面定制CSS代码一栏中，然后你就可以省略下面这句话：

<link rel="stylesheet" href="https://files.cnblogs.com/files/username/style.css">

把改好的文件上传到博客园，然后加上相应的HTML代码（如果没加过的话），就可以看到效果了。如果没有变化的话，你需要在文件上传那一页下载你的highlight.pack.js，然后在浏览器见到代码页后按右键选择重新加载（Chrome浏览器），看到代码内容发送变化即可

然后尝试用markdown编写博客，发布草稿，自行对这两个项进行测试即可。加上宏和枚举值后，最终我的测试效果如下：

HRESULT hr = S_OK;

// 创建D3D设备 和 D3D设备上下文
UINT createDeviceFlags = 0;
#if defined(DEBUG) || defined(_DEBUG)  
createDeviceFlags |= D3D11_CREATE_DEVICE_DEBUG;
#endif
// 驱动类型数组
D3D_DRIVER_TYPE driverTypes[] =
{
    D3D_DRIVER_TYPE_HARDWARE,
    D3D_DRIVER_TYPE_WARP,
    D3D_DRIVER_TYPE_REFERENCE,
};
UINT numDriverTypes = ARRAYSIZE(driverTypes);

// 特性等级数组
D3D_FEATURE_LEVEL featureLevels[] =
{
    D3D_FEATURE_LEVEL_11_1,
    D3D_FEATURE_LEVEL_11_0,
};

这样看就很像在Visual Studio里面的深色主题写代码了

而且其实不止是博客园，这种方式也可以让你在别的地方实现自定义的语法高亮效果，快动手试一下吧！

作者：X_Jun

出处：X_Jun - 博客园

本文版权归X_Jun(博客园)所有(CSDN为x_jun96)，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于：https://www.cnblogs.com/X-Jun/p/9332366.html

jQuery的 highlight.js 代码高亮插件的使用

在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观。

1.官网

highlight.js
highlight.js css demo
highlight.js API

2.下载

首先，我们先到官网下载一个highlight的js文件。highlight.js 点击get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。然后点击下面的download按钮，下载，解压，里面会有js文件和css文件。

打开里面的styles文件，里面有很多的css文件。这些文件可以更改你的展示代码的css样式，包括高亮的颜色和背景色(主题色)。在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式？这个网址有各个css文件的效果展示：highlight.js css demo

在使用时，在<pre><code></code></pre>标签里的代码块会自动高亮。如果你的代码里包含标签，记得将标签的"<“换成”<"，把">“换成”>"。

3.highlight使用

可以在 highlight.js API 上进行查看相关API的使用。

3.1加载js

在head中加载jquery.js和jquery.highlight.js，

<script src="./jquery-1.9.1/jquery.js"></script>
<script src="./jquery.highlight.js"></script>  

3.2设置高亮css及触发高亮

在css中或通过jquery指定高亮区域的颜色：

 .highlight {background-color: #FFFF88; }

或

$(".highlight").css({ backgroundColor: "#FFFF88" });

触发高亮：

//高亮显示所有td标签中的“hello”
$("td").highlight("hello");

3.3示例代码

<!DOCTYPE html>  
<html>  
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
        <title>test</title>  
        <script src="./jquery-1.9.1/jquery.js"></script>
        <script src="./jquery.highlight.js"></script>  
        <style> .highlight{background-color: #FFFF88;} </style>  

        <script language="JavaScript">
            $(document).ready(function () {
                $('td').highlight("name");
                $('td').highlight("hello");

            });
        </script>  

    </head> 


    <body>  
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Evename</td>
                <td>Jackson</td>
                <td>94 hello</td>
            </tr>
        </table> 
    </body>
</html>      

4.注意
$('td').highlight("name");必须放到 document.ready的函数中才能生效，当然也可以放到其它函数，在需要的时候再调用。
该插件可以高亮单词、语句，但不能同时高亮多个单词。可以通过重复该语句解决，比如$('td').highlight("word1"); $('td').highlight("word2");
按理来说用<style> .highlight{background-color: #FFFF88;} </style>和$(".highlight").css({backgroundColor: "#FFFF88"});都行，但实际上只能使用第一个，后一个不会生效。

参考
jquery-highlight在web页面让字符高亮显示
实现文字高亮功能的两种解决方案（Javascript/Jquery）
jQuery的highlight插件使用示例
highlight.js 代码高亮插件的使用
————————————————
版权声明：本文为CSDN博主「smile radiantly」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhixingwu/article/details/107377056

高亮显示搜索到的关键字-jquery.highlight.js的用法！

闲话少说，直接看需求: 在一篇文章中查找关键字，找到后高亮显示.

这种需求可以用js实现，可以用jquery实现，殊不知jquery有现成的插件，亲，你不用自己实现了，只需要引入jquery-hightlight.js

注意:如下body内容如此复杂只是为了测试，没有其他目的.

<!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.length > 0) {
  	  				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>

实现效果如何呢？看如下效果图:

怎么样，够简单吧！当然他的功能不仅如此，快点网上去搜索看吧！如下是我参考的资料:

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

使用方法如下：

在<head>中引入jquery文件及插件文件jquery.highlight.js

<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery.highlight.js"></script>
<script type="text/javascript">
function hightlight(str){
$(".highlight").highlight(str);
}
</script>

在页面Body部分加入从表单传递过来的关键字<body οnlοad="hightlight('<%=keywords%>');">
Css样式：<style type="text/css">        .highlight{background-color: #FFAEB1;}        </style>
具体介绍如下：
在css中或通过jquery指定高亮区域的颜色：

.highlight {background-color: #FFFF88; }
$(".highlight").css({ backgroundColor: "#FFFF88" });

设置需要高亮显示的词语或通过事件触发高亮显示。例如：

      $("h1").highlight("highlight");
      //高亮显示所有h1标签中的“highligh”
      $("body p").unhighlight();
      //取消所有body中段落里的高亮显示；
      $("p").highlight("jQuery highlight plugin");
      //高亮段落中的词条 “jQuery highlight plugin”
      $("p").highlight(["jQuery", "highlight", "plugin"]);
      //高亮段落中的 “jQuery”，“highlight”及“plugin”
      $("p").highlight("Highlight", { caseSensitive: true });
      //高亮段落中的 “Highlight”，区分大小写。
      $("p").highlight("light", { wordsOnly: true });
      //高亮段落中的 “light”，必须是完整单词，“highlight”中的“light”不会高亮
      $("p").highlight("highlight", { element: 'em', className: 'error' });
      //高亮段落中的 “hightlight”，并为其指定父标签为em，class为error
      $("p").highlight("highlight", { element: 'em', className: 'error' });
      //高亮段落中的 “hightlight”，并为其指定父标签为em，class为error
     $("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'});
     $("body p a.jQueryLink").attr({ href: 'http://jquery.com' });
    //高亮段落中的 “jQuery”，并为其加上链接。

————————————————
版权声明：本文为CSDN博主「IluckySi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sidongxue2/article/details/44938463

转载于：微信小程序实现关键词高亮_小程序关键词高亮_苏苏哇哈哈的博客-CSDN博客

使用mark.js插件实现富文本内容关键词搜索 - 简书

highlight.js 语法高亮，让你的页面更美观~_心。晴的博客-CSDN博客

https://www.cnblogs.com/X-Jun/p/9332366.html

jQuery的 highlight.js 代码高亮插件的使用_highlight.js jquery_smile radiantly的博客-CSDN博客

高亮显示搜索到的关键字-jquery.highlight.js的用法！_jquery hightlight_IluckySi的博客-CSDN博客

电脑关键字：关键字高亮  或  关键词高亮