JS正则获取HTML元素的方法
本文介绍如何利用JavaScript正则表达式提取HTML中的特定元素。重点解析了match方法在缺少g标志时仅返回首个匹配项及捕获组的行为,以及g标志配合exec方法实现全局遍历的原理。通过具体代码示例展示了如何构建正则以匹配img、script等标签,并提供了在线测试工具链接供参考。
JS正则获取HTML元素的方法
本文通过具体实例,详细解析了使用JavaScript正则表达式提取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标志,这影响了匹配目标的下移机制。
正确的理解方式如下。
全局匹配与exec方法应用
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正则表达式在线测试工具: http://tools.jb51.net/regex/javascript
正则表达式在线生成工具: http://tools.jb51.net/regex/create_reg
期望本文所述内容能对各位的JavaScript程序设计工作有所助益。
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
