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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
Vue动态获取width的方法
Aug 22 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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的类树(支持无限分类)
2006/10/09 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python中as用法实例分析
2015/04/30 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python global关键字的用法详解
2019/09/05 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
5款实用的python 工具推荐
2020/10/13 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
文体活动实施方案
2014/03/27 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
政协常委会议主持词
2015/07/03 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技