• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >正则表达式 > 如何实现正则表达式的JavaScript的代码高亮

如何实现正则表达式的JavaScript的代码高亮

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了javascript正则表达式,正则表达式,手机号正则表达式,正则表达式测试工具,python 正则表达式等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

今天想改一下JS的高亮的配色,憋了一下午憋出了这个这个正则表达式。
  下面这老长老长了的玩意儿是个正则表达式,看到了别吓坏了。

  现在,我们可以来慢慢分析它。仔细看这个正则表达式你会发现,它们是很多个正则表达式用|连接起来的。现在,我们把它用|分割,逐个分析。

  这是第二个,这个正则表达式是用来匹配字符串的。字符串可以在单引号和双引号中,所以我们匹配这两个的任意一个。这里需要用一个括号把它括起来表示它是一个获取匹配(“获取匹配”的“获取”是名词),因为在结束的地方还需要匹配这个字符。在匹配字符串结束的地方可以用后向引用\3来匹配字符串开始的字符,也就是开始时的引号种类。如果你从这整个正则表达式的开头开始数,你就会发现["']外面的括号是整个正则表达式中的第三个获取匹配。这就是字符串的头尾部分,中间的部分由于字符串是可以包含转义的,所以我们一旦遇到反斜杠就直接跳过它后面那个字符,因为反斜杠后面包含的是转义。但是这仅仅是匹配转义,所以我们要用或运算|连接一个匹配非转义的表达式,那就是[^\\]。可是这个是匹配非反斜杠的任何字符,它可以包含换行,而JS中的字符串是不允许写成换行的。所以我们需要加个\n让它不匹配换行。由于我们使用了或来连接,而或的优先级非常低,所以需要在旁边加上括号来修正优先级。如果使用普通的括号就会占用一个获取匹配,所以我们要使用(?:)来完成一个非获取匹配。

  这是第3、4、5、6个,这些只是匹配一些关键字,由于需要的颜色不同所以被分组了。这没什么好说的,跳过。

  这是第七个,它的作用是匹配普通的变量名。如果变量名的字符不消耗掉,后面匹配数字的就有可能会把变量名中的数字匹配输出来。所以这一步是必须的。你会发现这一步没有任何获取匹配,因为变量名的颜色是默认颜色,我们不获取它。根据JS的命名规则,变量名是不能以数字开头的,所以我们用[^\W\d]|\$匹配一个变量的开头。后面则可以匹配数字、字母、下划线、美元符号,任意次。这样变量名就被消耗掉了。

  这是第八个,匹配数字的。由于数字的表达方式有两种,所以我们要分开写。|的左边是16进制的数字写法。右边是普通的数字写法,这个可以包含小数和科学计数法。由于小数和科学计数法都是可选存在的,所以我们把它括号起来,后面加上问号作为可选匹配。

  这是第九个,匹配正则表达式的。前面有个非获取匹配,匹配非括号的结束。因为如果存在括号,那么斜杆就有可能表示的是除号而不是正则表达式了。后面就是正则表达式的匹配,和字符串的匹配类似,只不过最后多了一个[gim]*。这是正则表达式的三种匹配模式,也是属于正则表达式的范畴,所以我们要匹配并获取它。

  最后一个是匹配所有上面没有匹配到的字符,我们必须匹配到每一个字符。因为它们都需要做一次HTML转义。
  这样,这个长长的正则就分析完了。下面是实现的例子。

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript的正则也有单行模式了
  • JavaScript正则表达式校验非零的正整数实例
  • JavaScript正则表达式校验非零的负整数实例
  • JavaScript系列文章:详解正则表达式基本知识
  • Javascript校验密码复杂度的正则表达式
  • JavaScript中一些常用的正则表达式(推荐)
  • JavaScript正则表达式验证代码(推荐)
  • JavaScript正则表达式下之相关方法
  • JavaScript正则表达式上之基本语法(推荐)
  • JavaScript 中的正则表达式(推荐)

相关文章

  • 2017-05-11Python正则表达式之基础篇
  • 2017-05-11Java正则表达式入门基础篇(新手必看)
  • 2017-05-11限制文本框中只能输入实数或整数,其它字符无效,有劳大家了!
  • 2017-05-11javascript正则表达式和字符串RegExp and String(一)
  • 2017-05-11正则表达式的基本知识
  • 2017-05-11利用js正则表达式校验正数、负数、和小数
  • 2017-05-11正则表达式简单的检查输入email是否合法程序
  • 2017-05-11jQuery正则表达式的使用方法步骤详解
  • 2017-05-11iOS 正则表达式判断纯数字及匹配11位手机号码的方法
  • 2017-05-11JavaScript中一些常用的正则表达式(推荐)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 日常收集JS邮箱验证正则表达式
    • 解决preg_match匹配过多字符长度的限制的思路分析
    • 比较常用的几个正则表达式匹配数字(收藏)
    • 一个非常不错的一个正则练习JS版
    • js正则表达式之match函数讲解
    • php 正则表达式的子模式详解
    • 常用的匹配正则表达式和实例
    • [正则表达式]贪婪模式与非贪婪模式
    • 判断用户输入的银行卡号是否正确的方法(基于Luhn算法的格式校验)
    • 最全最实用的正则表达式大全分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有