js关键词高亮，及关键词出现的次数

因为项目客观因素把关键词统计的次数放在了前端，网上查找了一些资料自己整合了一段代码。适用多个关键词及其出现次数

上代码：

<body>
<div class="text" style="width: 500px;height: 200px">

</div>
<table>
   <thead>
   <tr>
      <td>关键词</td>
      <td>次数</td>
   </tr>
   </thead>
   <tbody id="tbody"></tbody>
</table>

</body>


<script type="text/javascript">
   var context = "北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。" +
         "北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。" +
         "是世界上现存规模最大、保存最为完整的木质结构古建筑之一。";
   var words = ["北京","中国","世界"];
   var countList = new Array();
　 for(var word of words){
      //根据关键词新建一个正则，其中g代表全局匹配
      var reg = new RegExp(word,'g');
      if(reg.test(context)){
　　　　　　//将出现的关键词进行高亮处理
         context = context.replace(reg,'<span style="color: red">' + word + '</span>')
         //match()方法与indexOf()类似，只不过match()返回的匹配的字符串的数组，注意:正则需为全局'g'否则只找出现的第一个，如果没有改字符串则返回null
　　　　　 var count = context.match(reg).length;
         var obj = new Object();
         obj.key = word;
　　　　　　//数据的长度就是改关键词出现的次数
         obj.value = count;
         countList.push(obj);
      }
   }
   $('.text').html(context);
　　
   //将结果在表格上展示

　　var str = '';
　　for(var obj of countList){
   　　str += '<tr>'
      　　+'<td>' + obj.key + '</td>'
      　　+'<td>' + obj.value + '</td>'
      　　+'</tr>'
　　}
　　$('#tbody').html(str);


</script>

效果预览：

js关键词高亮，及关键词出现的次数

猜你喜欢