关键词高亮

从网上找了个正则

<html>
    <head>
        <style>body {font:14px/18px Consolas;}</style>
    </head>
    <body>
<script id="code">
//读入当前代码
var code="‘xX‘ 12 function if Object null true /* ab\nc */ ";
//修正换行的浏览器差异,去掉头尾的换行和空格
code=code.replace(/\r\n|[\r\n]/g,"\n").replace(/^\s+|\s+$/g,"");
//开始主匹配
code=code.replace(/(\/\/.*|\/\*[\S\s]+?\*\/)|((["‘])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)|(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[.\s]/g,function(){
  var a,l,i,s;
  a=arguments;
  //循环匹配到的位置
  for(i=1;i<=9;i++)
    if(s=a[i]){
        s=htmlEncode(s);
        //每个获取匹配的位置都着上不同的颜色
        switch(i){
          case 1://注释
          return s.fontcolor("#998877").italics();
          case 2:case 3://字符串
          return s.fontcolor("#AA5544");
          case 4://关键词
          return s.fontcolor("#333388");
          case 5://内置对象
          return s.fontcolor("#5555AA");
          case 6://布尔值
          return s.fontcolor("#DD6600");
          case 7://空值
          return s.fontcolor("#BB4433");
          case 8://数字
          return s.fontcolor("#CC3322");
          case 9://正则表达式
          //这个比较特殊,匹配到的和获取的有些不同
          //匹配的时候,前面有个非获取匹配,所以我们要保留非获取匹配的部分
          return htmlEncode(a[0]).replace(s,s.fontcolor("#33AA33"));
        };
    };
  //没有获取匹配就直接转义输出
  return htmlEncode(a[0]);
});

//输出结果
document.write(code);

//HTML的转义函数
function htmlEncode(e){
  var i,s;
  for(i in s={
    "&":/&/g,"‘":/‘/g,
    "<":/</g,">":/>/g,"<br/>":/\n/g,
    " ":/ /g,"  ":/\t/g
  })e=e.replace(s[i],i);
  return e;
};
</script>

</body>
</html>
s.fontcolor("#CC3322"); 可以用
s.css({"color" : "#CC3322"});
时间: 2024-11-08 04:39:29

关键词高亮的相关文章

3.6 Lucene基本检索+关键词高亮+分页

3.2节我们已经运行了一个Lucene实现检索的小程序,这一节我们将以这个小程序为例,讲一下Lucene检索的基本步骤,同时介绍关键词高亮显示和分页返回结果这两个有用的技巧. 一.Lucene检索的基本步骤 1 import java.nio.file.Paths; 2 import java.io.*; 3 4 import org.apache.lucene.analysis.standard.StandardAnalyzer; 5 import org.apache.lucene.docu

如何通过js使搜索关键词高亮

给你推荐通过jquery来实现高亮关键词.jquery.textSearch-1.0.js代码: (function($){ $.fn.textSearch =function(str,options){ var defaults ={ divFlag:true, divStr:" ", markClass:"", markColor:"red", nullReport:true, callback:function(){ returnfalse

微信小程序--搜索关键词高亮

代码地址如下:http://www.demodashi.com/demo/14249.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现搜索关键词高亮 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view class="container"

和我一起打造个简单搜索之SpringDataElasticSearch关键词高亮

前面几篇文章详细讲解了 ElasticSearch 的搭建以及使用 SpringDataElasticSearch 来完成搜索查询,但是搜索一般都会有搜索关键字高亮的功能,今天我们把它给加上. 系列文章 一.和我一起打造个简单搜索之ElasticSearch集群搭建 二.和我一起打造个简单搜索之ElasticSearch入门 三.和我一起打造个简单搜索之IK分词以及拼音分词 四.和我一起打造个简单搜索之Logstash实时同步建立索引 五.和我一起打造个简单搜索之SpringDataElasti

2 Match、Filter、排序、分页、全文检索、短语匹配、关键词高亮

查索引内所有文档记录 GET  /beauties/my/_search GET  /beauties/my/_search { "query":{ "match_all": {} } } 匹配.排序 GET  /beauties/my/_search { "query": { "match": { "Name": "Ruru" } }, "sort": [ {&qu

Qt关键词高亮方法小结

高亮关键词的需求不一样,可能采用的比较适合的方法也不一样,以下对常见方法作小结. 1 QSyntaxHighlighter QSyntaxHighlighter用于高亮QTextDocument中的text,要求继承QSyntaxHighlighter并实现highlightBlock virtual void highlightBlock(const QString &text) = 0; 下面给出示例代码: //.h #ifndef HIGHLIGHTER_H #define HIGHLIG

页面的关键词高亮

function keyLight(id, key, bgColor) { var oDiv = document.getElementById(id), sText = oDiv.innerHTML, bgColor = bgColor || "orange", sKey = "<span style='color: " + bgColor + ";'>" + key + "</span>", num

CodeMirror---实现关键词高亮

这周前端vue项目有一小需求,需要实现在文本框中输入不同编程语言代码块并且让关键词高亮显示. 经过调研决定使用vue-codemirror和codemirror: 原因如下: vue-codemirror是基于codemirror,适用于 Vue 的 Web 代码编辑器: 但是导入vue-codemirror后并没有发现codemirror的核心css以及使用的语言语法定义文件,如下图: 实现过程如下: 1.导入插件 //导入codemirror 插件 npm install codemirro

JS实现查询关键词高亮效果

在页面上查询关键,使其高亮显示,实现代码如下: CSS样式:  <style type="text/css">         .highlight        {             background-color: yellow;         }  </style> javascript: function highlight() {             clearSelection(); //先清空一下上次高亮显示的内容: