TinyMCE 富文本编辑器 ━━ 一键排版功能所需正则表达式整理及学习

如果是公文发布,客户往往喜欢直接把word内容复制粘贴,这也导致大量的出错。最近客户的对格式的需求比较强烈,正好借机弄一弄。之前已经放了tinymce的插件及弹窗开发相关内容,今天进入一点关键内容~~

一、以下为目前开发的一键排版功能中涉及到的正则替换,还需优化,未来会陆续新增及改进

//清除所有html空格
txt = txt.replace(/ /ig,"");

//清除所有空行(摘录网上,实测可用)
var arrPattern = [
	'|\\s+[^>]*>)( | |\\s| |)*<\/p(>|\\s+[^>]*>)',
	'(((\\s| | | )*)){2,}',
	'(|\\s+[^>]*>))(( | |\\s)*)*((.|\n|\r)*?<\/p(>|\\s+[^>]*>))'
];
var arrReplace = ['','
$3'
,'$1$6']; for(var i=0;i<arrPattern.length;i++){ var arrRegExp = new RegExp(arrPattern[i], 'img'); txt = txt.replace(arrRegExp,arrReplace[i]); } //清除所有非空格的空白字符,空格字符去除可能导致元素属性出错 txt = txt.replace(/[\f\n\r\t\v]/ig,""); //清除所有span txt = txt.replace(/<(\/span|span).*?>/ig,""); //清除超链接,将网址分离在后 txt = txt.replace(/(.*?)<\/a>/ig,"$2[网址:$1]"); //实际运行中发现有些错误的a链接可能根本没有href,所以需要再次清理 txt = txt.replace(/<(\/a|a).*?>/ig,""); //清除所有class,为防止有些class不加引号,因此强制规定只清除元素内的class,这种写法最笨和直观,聪明的看下一个 txt = txt.replace(/<([a-zA-Z1-6]+)(.*?)\s*class\s*=\s*[\"|\']?.*?[\"|\']\s*(.*?)>?/ig,"<$1 $2 $3>"); //清除所有style属性 //直接量语法: txt = txt.replace(/style\s*?=\s*?([\'\"])[\s\S]*?\1/ig,""); //RegExp对象语法,可用于自定义变量,比如出了style以外的class,lang等等 var v = "style"; txt = txt.replace(new RegExp(v+"\\s*?=\\s*?([\'\"])[\\s\\S]*?\\1","ig"),""); //清除所有元素属性,超链接可能被清除 txt = txt.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/ig, "<$1>"); //给每段加上样式 txt = txt.replace(//ig,"

"); //去除除img标签外其它标签 txt = txt.replace(/<(?!img).*?>/g, ""); //如果保留img,p标签,则为: txt = txt.replace(/<(?!img|p|/p).*?>/g, "");

二、网上整理的常用正则:http://caibaojian.com/form-regexp.html

1 用户名正则

//用户名正则,4到16位(字母,数字,下划线,减号)
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("caibaojian"));

2 密码强度正则

//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("=="+pPattern.test("caibaojian#"));

3 整数正则

//正整数正则
var posPattern = /^\d+$/;
//负整数正则
var negPattern = /^-\d+$/;
//整数正则
var intPattern = /^-?\d+$/;
//输出 true
console.log(posPattern.test("42"));
//输出 true
console.log(negPattern.test("-42"));
//输出 true
console.log(intPattern.test("-42"));

4 数字正则
可以是整数也可以是浮点数

//正数正则
var posPattern = /^\d*\.?\d+$/;
//负数正则
var negPattern = /^-\d*\.?\d+$/;
//数字正则
var numPattern = /^-?\d*\.?\d+$/;
console.log(posPattern.test("42.2"));
console.log(negPattern.test("-42.2"));
console.log(numPattern.test("-42.2"));

5 Email正则

//Email正则
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test("[email protected]"));

6 手机号码正则

//手机号正则
var mPattern = /^1[34578]\d{9}$/; //http://caibaojian.com/regexp-example.html
//输出 true
console.log(mPattern.test("15507621888"));

7 身份证号正则

//身份证号(18位)正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//输出 true
console.log(cP.test("11010519880605371X"));

8 URL正则

//URL正则
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//输出 true
console.log(urlP.test("http://caibaojian.com"));

9 IPv4地址正则

//ipv4地址正则
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//输出 true
console.log(ipP.test("115.28.47.26"));

10 十六进制颜色正则

//RGB Hex颜色正则
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//输出 true
console.log(cPattern.test("#b8b8b8"));

11 日期正则

//日期正则,简单判定,未做月份及日期的判定
var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//输出 true
console.log(dP1.test("2017-05-11"));
//输出 true
console.log(dP1.test("2017-15-11"));
//日期正则,复杂判定
var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
//输出 true
console.log(dP2.test("2017-02-11"));
//输出 false
console.log(dP2.test("2017-15-11"));
//输出 false
console.log(dP2.test("2017-02-29"));

12 QQ号码正则

//QQ号正则,5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("65974040"));

13 微信号正则

//微信号正则,6至20位,以字母开头,字母,数字,减号,下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//输出 true
console.log(wxPattern.test("caibaojian_com"));

14 车牌号正则

//车牌号正则
var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
//输出 true
console.log(cPattern.test("粤B39006"));

15 包含中文正则

//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("蔡宝坚"));

16 匹配中文字符的正则表达式:

 [u4e00-u9fa5]

17 匹配双字节字符(包括汉字在内):

[^x00-xff]

评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

18 匹配空白行的正则表达式:

ns*r

评注:可以用来删除空白行

19 匹配HTML标记的正则表达式:

< (S?)[^>]>.?|< .? />

评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力

20 匹配首尾空白字符的正则表达式:

^s|s$

评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式

21 匹配Email地址的正则表达式:

w+([-+.]w+)@w+([-.]w+).w+([-.]w+)*

评注:表单验证时很实用

22 匹配网址URL的正则表达式:

[a-zA-z]+://[^s]*

评注:网上流传的版本功能很有限,上面这个基本可以满足需求

23 匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):

^[a-zA-Z][a-zA-Z0-9_]{4,15}$

评注:表单验证时很实用

24 匹配国内电话号码:

d{3}-d{8}|d{4}-d{7}

评注:匹配形式如 0511-4405222 或 021-87888822

25 匹配腾讯QQ号:

[1-9][0-9]{4,}

评注:腾讯QQ号从10000开始

26 匹配中国邮政编码:

[1-9]d{5}(?!d)

评注:中国邮政编码为6位数字

27 匹配身份证:

d{15}|d{18}

评注:中国的身份证为15位或18位

28 匹配ip地址:

d+.d+.d+.d+

评注:提取ip地址时有用

29 匹配特定数字:

^[1-9]d$    //匹配正整数 
^-[1-9]d$   //匹配负整数
^-?[1-9]d$   //匹配整数
^[1-9]d|0$  //匹配非负整数(正整数 + 0)
^-[1-9]d|0$   //匹配非正整数(负整数 + 0)
^[1-9]d.d|0.d[1-9]d$   //匹配正浮点数
^-([1-9]d.d|0.d[1-9]d)$  //匹配负浮点数
^-?([1-9]d.d|0.d[1-9]d|0?.0+|0)$  //匹配浮点数
^[1-9]d.d|0.d[1-9]d|0?.0+|0$   //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]d.d|0.d[1-9]d*))|0?.0+|0$  //匹配非正浮点数(负浮点数 + 0)

评注:处理大量数据时有用,具体应用时注意修正

30 匹配特定字符串:

^[A-Za-z]+$  //匹配由26个英文字母组成的字符串
^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串
^[a-z]+$  //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串
^w+$  //匹配由数字、26个英文字母或者下划线组成的字符串

31 在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:

//只能输入数字:
^[0-9]$

//只能输入n位的数字:
^d{n}$

//只能输入至少n位数字:
^d{n,}$

//只能输入m-n位的数字:
^d{m,n}$

//只能输入零和非零开头的数字:
^(0|[1-9][0-9])$

//只能输入有两位小数的正实数:
^[0-9]+(.[0-9]{2})?$

//只能输入有1-3位小数的正实数:
^[0-9]+(.[0-9]{1,3})?$

//只能输入非零的正整数:
^+?[1-9][0-9]$

//只能输入非零的负整数:
^-[1-9][0-9]$

//只能输入长度为3的字符:
^.{3}$

//只能输入由26个英文字母组成的字符串:
^[A-Za-z]+$

//只能输入由26个大写英文字母组成的字符串:
^[A-Z]+$

//只能输入由26个小写英文字母组成的字符串:
^[a-z]+$

//只能输入由数字和26个英文字母组成的字符串:
/^[A-Za-z0-9]+$/

//只能输入由数字、26个英文字母或者下划线组成的字符串:
^w+$

//验证用户密码:
^[a-zA-Z]w{5,17}$
//正确格式为:以字母开头,长度在6-18之间

32 只能包含字符、数字和下划线。

//验证是否含有^%&',;=?$"等字符:
[^%&',;=?$x22]+
//能输入汉字:
^[u4e00-u9fa5],{0,}$

33 匹配中文字符的正则表达式:

[u4e00-u9fa5]

34 匹配双字节字符(包括汉字在内):

[^x00-xff]

35 匹配空行的正则表达式:

n[s| ]r

36 匹配HTML标记的正则表达式:

/< (.)>.|< (.) />/

37 匹配首尾空格的正则表达式:

(^s)|(s$)

38 验证一年的12个月:

^(0?[1-9]|1[0-2])$
//正确格式为:“01”-“09”和“1”“12”

39 验证一个月的31天:

^((0?[1-9])|((1|2)[0-9])|30|31)$

基础知识的学习可前往该网站:https://www.runoob.com/regexp/regexp-tutorial.html

三、修饰符说明

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

更详细的用法(i、g、m、s、x、e)参考:
https://www.cnblogs.com/kevin-yuan/archive/2012/09/25/2702167.html

https://blog.csdn.net/qq_36340642/article/details/79352876

四、元字符说明

字符 描述
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如,‘n’ 匹配字符 “n”。‘\n’ 匹配一个换行符。序列 ‘\’ 匹配 “” 而 “(” 则匹配 “(”。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 ‘\n’ 或 ‘\r’ 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 ‘\n’ 或 ‘\r’ 之前的位置。
* 匹配前面的子表达式零次或多次。例如,zo* 能匹配 “z” 以及 “zoo”。* 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如,‘zo+’ 能匹配 “zo” 以及 “zoo”,但不能匹配 “z”。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。例如,“do(es)?” 可以匹配 “do” 或 “does” 。? 等价于 {0,1}。
{n} n 是一个非负整数。匹配确定的 n 次。例如,‘o{2}’ 不能匹配 “Bob” 中的 ‘o’,但是能匹配 “food” 中的两个 o。
{n,} n 是一个非负整数。至少匹配n 次。例如,‘o{2,}’ 不能匹配 “Bob” 中的 ‘o’,但能匹配 “foooood” 中的所有 o。‘o{1,}’ 等价于 ‘o+’。‘o{0,}’ 则等价于 ‘o*’。
{n,m} m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。例如,“o{1,3}” 将匹配 “fooooood” 中的前三个 o。‘o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 “oooo”,‘o+?’ 将匹配单个 “o”,而 ‘o+’ 将匹配所有 ‘o’。
. 匹配除换行符(\n、\r)之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符,请使用像"(.
(pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 ‘(’ 或 ‘)’。
(?:pattern) 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 “或” 字符 (
(?=pattern) 正向肯定预查(look ahead positive assert),在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,"Windows(?=95
(?!pattern) 正向否定预查(negative assert),在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如"Windows(?!95
(?<=pattern) 反向(look behind)肯定预查,与正向肯定预查类似,只是方向相反。例如,"(?<=95
(? 反向否定预查,与正向否定预查类似,只是方向相反。例如"(?
x|y 匹配 x 或 y。例如,'z
[xyz] 字符集合。匹配所包含的任意一个字符。例如, ‘[abc]’ 可以匹配 “plain” 中的 ‘a’。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如, ‘[^abc]’ 可以匹配 “plain” 中的’p’、‘l’、‘i’、‘n’。
[a-z] 字符范围。匹配指定范围内的任意字符。例如,‘[a-z]’ 可以匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如,‘[^a-z]’ 可以匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符。
\b 匹配一个单词边界,也就是指单词和空格间的位置。例如, ‘er\b’ 可以匹配"never" 中的 ‘er’,但不能匹配 “verb” 中的 ‘er’。
\B 匹配非单词边界。‘er\B’ 能匹配 “verb” 中的 ‘er’,但不能匹配 “never” 中的 ‘er’。
\cx 匹配由 x 指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 ‘c’ 字符。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]。
\f 匹配一个换页符。等价于 \x0c 和 \cL。
\n 匹配一个换行符。等价于 \x0a 和 \cJ。
\r 匹配一个回车符。等价于 \x0d 和 \cM。
\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t 匹配一个制表符。等价于 \x09 和 \cI。
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
\w 匹配字母、数字、下划线。等价于’[A-Za-z0-9_]'。
\W 匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’。
\xn 匹配 n,其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,‘\x41’ 匹配 “A”。‘\x041’ 则等价于 ‘\x04’ & “1”。正则表达式中可以使用 ASCII 编码。
\num 匹配 num,其中 num 是一个正整数。对所获取的匹配的引用。例如,‘(.)\1’ 匹配两个连续的相同字符。
\n 标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式,则 n 为向后引用。否则,如果 n 为八进制数字 (0-7),则 n 为一个八进制转义值。
\nm 标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式,则 nm 为向后引用。如果 \nm 之前至少有 n 个获取,则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足,若 n 和 m 均为八进制数字 (0-7),则 \nm 将匹配八进制转义值 nm。
\nml 如果 n 为八进制数字 (0-3),且 m 和 l 均为八进制数字 (0-7),则匹配八进制转义值 nml。
\un 匹配 n,其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如, \u00A9 匹配版权符号 (?)。

五、各正则表达式相同异同点:

命令或环境 . [ ] ^ $ \( \) \{ \} ? + | ( )
vi
Visual C++
awk 1
sed
delphi
python
java
javascript
php
perl
C#

六、学习资料:

JavaScript 正则表达式知识

PHP正则表达式知识

C# 正则表达式知识

Java 正则表达式知识

Python 正则表达式知识

Ruby 正则表达式知识

TinyMCE 富文本编辑器 ━━ 一键排版功能所需正则表达式整理及学习_第1张图片


  1. awk是支持该语法的,只是要在命令 行加入 --posix or --re-interval参数即可,可见 man awk中的interval expression ↩︎

你可能感兴趣的:(前端,javascript,tinymce,富文本编辑器,正则表达式,html)