JS正则获取HTML元素的方法

本文实例讲述了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

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 一个容易犯错的js手机号码验证正则表达式(推荐)

    写一个简单的正则表达式,用来校验11位手机号码,开头允许是13.15.18,我一开始这样写: var reg = /^(13[0-9]{9})|(15[0-9]{9})|(18[0-9]{9})$/; 运行发现,即使是 13988888877157777,也能通过验证,这说明这个写法错了,我的本意是希望这样: ^(13[0-9]{9})$ 或者 ^(15[0-9]{9})$ 或者 ^(18[0-9]{9})$ 所以正确写法是:var reg = /^1[358][0-9]{9}$/;这样才能保证

  • JS中正则表达式全局匹配模式 /g用法详解

    本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: var str = "123#abc"; var re = /abc/ig; console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false 在创建正则表达式对象时如果使用了"g&q

  • php与javascript正则匹配中文的方法分析

    本文实例讲述了php与javascript正则匹配中文的方法.分享给大家供大家参考,具体如下: php中正则匹配utf-8中文: (重点是:[\x{4e00}-\x{9fa5}]+) $str = "我们"; if (preg_match("/^[\x{4e00}-\x{9fa5}]+$/u",$str,$arr)) { print("该字符串全部是中文"); echo '<pre>'; print_r($arr); } else {

  • JavaScript的正则也有单行模式了

    正则表达式最早是由 Ken Thompson 于 1970 年在他改进过的 QED 编辑器里实现的,正则里最简单的元字符 "." 在当时所匹配的就是除换行符外的任意字符: "." is a regular expression which matches any character except <nl>. 上面这句话出自 QED 在 1970 年的官方文档,这可能是史上第一份正则文档. 为什么要这么规定?是因为 QED 是以行为单位来编辑文件的,而且行

  • javascript 正则表达式分组、断言详解

     javascript 正则表达式分组.断言详解 提示:阅读本文需要有一定的正则表达式基础. 正则表达式中的断言,作为高级应用出现,倒不是因为它有多难,而是概念比较抽象,不容易理解而已,今天就让小菜通俗的讲解一下. 如果不用断言,以往用过的那些表达式,仅仅能获取到有规律的字符串,而不能获取无规律的字符串. 举个例子,比如html源码中有<title>xxx</title>标签,用以前的知识,我们只能确定源码中的<title>和</title>是固定不变的.因

  • js正则表达式验证密码强度【推荐】

    js正则表达式验证密码强度【推荐】

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400

  • JS正则获取HTML元素的方法

    本文实例讲述了JS正则获取HTML元素的方法.分享给大家供大家参考,具体如下: var html = $("#summaryTemplate").html(); var imageMath = /<img [^<,>]*(?=target-type=("|')replace("|'))[^/,<,>]*\/>/; var scriptMath = /<script [^<,>]*(?=target-type=(&

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • js jquery获取当前元素的兄弟级 上一个 下一个元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps=s.previousSbiling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点 JS获取节点父级,子级元素 先说一下JS的获取方法,其

  • AngularJS遍历获取数组元素的方法示例

    AngularJS遍历获取数组元素的方法示例

    本文实例讲述了AngularJS遍历获取数组元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取数组的元素例子</title> <script src="angular.min.js"></script> <s

  • JS简单获得节点元素的方法示例

    本文实例讲述了JS简单获得节点元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS几种获得节点元素的方法</title> <script type="application/javascript">

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录

    目录 前言 使用uni.createSelectorQuery() 附:ni-app获取DOM元素信息及跳到指定位置 总结 前言 最近写uniapp,遇到一个需要获取到页面中dom元素,我第一反应是使用this.$ refs进行获取,于是我开心的使用this.$refs写了很多代码,使用h5调试的过程中没有发现任何问题,但后来真机调试的时候发现在app端无效,于是我查看文档发现了: 非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view.text 使用uni.createSele

  • JS简单获取当前日期时间的方法(如：2017-03-29 11:41:10 星期四)

    JS简单获取当前日期时间的方法(如：2017-03-29 11:41:10 星期四)

    本文实例讲述了JS简单获取当前日期时间的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JS日期时间</title> <meta http-equiv

  • js实现获取div坐标的方法

    js实现获取div坐标的方法

    本文实例讲述了js实现获取div坐标的方法.分享给大家供大家参考,具体如下: html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如下方法可以实现: /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj =

  • JS正则替换去空格的方法

    本文实例讲述了JS正则替换去空格的方法.分享给大家供大家参考,具体如下: 在网上找了好久,发现没几个是好用的.自己备份一个省得以后再找. //去左空格; function ltrim(s){ return s.replace( /^/s*/, ""); } //去右空格; function rtrim(s){ return s.replace( //s*$/, ""); } //左右空格; function trim(s){ return rtrim(ltrim(s

随机推荐