关于html字符串正则判断和匹配的具体使用


Posted in HTML / CSS onDecember 12, 2019

前言

最近在写一个组件,需要传入html字符串,里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等,这里记录下。

如何判断传入的字符串包含一个闭合html标签

  • /<\/?[a-z][\s\S]*>/i

这个其实并不能判断标签闭合的完整性或者顺序等,只是判断字符串中是否有html标签(包含自定义标签),这对我来说足够了。这给正则里面需要学习的就是[\s\S]可以代表一切字符串。

  • /<([a-z][\s\S]*)>.*<\/\1>/i

这个就更加规范一些可以匹配一个完整闭合的标签,\1代表前面的圆括号内捕获的内容,是正则的比较高级的用法。

如何匹配出一个标签内的文本内容

str = str.replace(/<title>[\s\S]*?<\/title>/, '<title>' + newTitle + '<\/title>');
  • 最好用一个语义化标签或者自定义标签来做匹配,如果使用div这种一段字符串中可能有好多个的,问题会很多。
  • [sS]*代表任意字符
  • *后面的?代表非贪婪模式,因为正则匹配默认都是贪婪模式的

总结

用正则从html标签中匹配文字其实是一种很低效的方式,不到必要时候也没必要去使用,有篇文章深刻的批判了这种行为有兴趣可以看一下。

常见正则表达式

匹配中文字符的正则表达式: [u4e00-u9fa5]  
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了
匹配双字节字符(包括汉字在内):[^x00-xff]
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
匹配空白行的正则表达式:ns*r
评注:可以用来删除空白行
匹配HTML标记的正则表达式:<(S*?)[^>]*>.*?|<.*? />
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式:^s*|s*$
评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式
匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注:表单验证时很实用
匹配网址URL的正则表达式:^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$
评注:网上流传的版本功能很有限,上面这个基本可以满足需求
匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注:表单验证时很实用
匹配国内电话号码:d{3}-d{8}|d{4}-d{7}
评注:匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号:[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始
匹配中国邮政编码:[1-9]d{5}(?!d)
评注:中国邮政编码为6位数字
匹配身份证:d{15}|d{18}
评注:中国的身份证为15位或18位
匹配ip地址:d+.d+.d+.d+
评注:提取ip地址时有用
匹配特定数字:

^[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)
评注:处理大量数据时有用,具体应用时注意修正
匹配特定字符串:

^[A-Za-z]+$

//匹配由26个英文字母组成的字符串

^[A-Z]+$

//匹配由26个英文字母的大写组成的字符串

^[a-z]+$

//匹配由26个英文字母的小写组成的字符串

^[A-Za-z0-9]+$

//匹配由数字和26个英文字母组成的字符串

^w+$

//匹配由数字、26个英文字母或者下划线组成的字符串
在使用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之间, 只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$"等字符:“[^%&'',;=?$x22]+”
只能输入汉字:“^[u4e00-u9fa5],{0,}$”
验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”,
“XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。
验证身份证号(15位或18位数字):“^d{15}|d{}18$”
验证一年的12个月:“^(0?[1-9]|1[0-2])$”正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为:“01”“09”和“1”“31”。
匹配中文字符的正则表达式: [u4e00-u9fa5]
匹配双字节字符(包括汉字在内):[^x00-xff]
匹配空行的正则表达式:n[s| ]*r
匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/
匹配首尾空格的正则表达式:(^s*)|(s*$) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
处理textarea中的换行和空格
Dec 12 #HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 #HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 #HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 #HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 #HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 #HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 #HTML / CSS
You might like
使用php shell命令合并图片的代码
2011/06/23 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
Javascript删除数组里的某个元素
2019/02/28 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
2014年五四青年节演讲稿范文
2014/04/22 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
关爱空巢老人感想
2015/08/11 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
flex弹性布局详解
2022/03/20 HTML / CSS
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫