JS正则获取HTML元素的方法


Posted in Javascript onMarch 31, 2017

本文实例讲述了JS正则获取HTML元素的方法。分享给大家供大家参考,具体如下:

var html = $("#summaryTemplate").html();
var imageMath = /<img [^<,>]*(?=target-type=("|')replace("|'))[^/,<,>]*\/>/;
var scriptMath = /<script [^<,>]*(?=target-type=("|')replace("|'))[^/,<,>]*><\/script>/;
var linkMath = /<link [^<,>]*(?=target-type=("|')replace("|'))[^/,<,>]*\/>/;
alert(html.match(imageMath));
var ht="<img src='/11.jpg' target-type='replace' />asf   <img src='/12.jpg' target-type='replace' />        <img src='/13.jpg' target-type='replace' />";
ht.match(imageMath)

为什么Math返回的数组不是 多个Img对象,而是

["<img src="/11.jpg" target-type='replace' />", "'", "'"]

不明白。。。。

后来验证是我的错,正则中 有g配置,是否下移至下一个目标。

正确

var attrbuteMath = "(?:\\w+)\\s*(?:=[^{,},<,>]+)";
var srcMath = "src(?:=[^{,},<,>]+)";
var hrefMath = "href(?:=[^{,},<,>]+)";
var scriptMath = "<script\\s+(?:" + attrbuteMath + ")*><\/script>";
var ge = new RegExp(scriptMath,"gi");
// var html = "<script asdfsadf='asdfsaf' asf=aaadsdfsdf style='' src='' ><\/script>asdfsaf<script asdfsadf='asdfsaf' asf=''aa adsdfsdf  ><\/script>";
var html = $("#txtHtml").val();
var result = ge.exec(html);
alert(result);

g表示要搜索字符串出现的,而不是找到第一个匹配后就停止。如果还要模式不区分大小写,可以给第二个参数添加字符 i

Javascript 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
VUE重点问题总结
Mar 19 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 #Javascript
ES6中Generator与异步操作实例分析
Mar 31 #Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 #Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 #Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 #Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 #Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 #Javascript
You might like
php设计模式小结
2013/02/15 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
浅谈Javascript 执行顺序
2013/12/18 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python内存读写操作示例
2018/07/18 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python实现桌面托盘气泡提示
2019/07/29 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python super函数使用方法详解
2020/02/14 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
教师对学生的寄语
2014/04/03 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Go遍历struct,map,slice的实现
2021/06/13 Golang
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS