var imgStr = "<p><img src='http://www.baidu.com/FpmF-JifNksQTHo7InP_LMukbtWc'/></p>"
//解析富文本获取img里面的src属性值
var patt = /<img[^>]+src=['"]([^'"]+)['"]+/g
var result = [],
temp
while ((temp = patt.exec(imgStr)) != null) {
result.push({'url':temp[1]})
}
console.log(result) //http://www.baidu.com/FpmF-JifNksQTHo7InP_LMukbtWc
二、获取指定元素属性值
function getDomAttr(str,tag,attr) {
// const val = /(?<=data-value=").*?(?=")/
var patt = `/<${tag}[^>]+${attr}=['"]([^'"]+)['"]+/g`
let temp = patt.exec(str)
// console.log('str.match(val)', temp)
return temp[1]
}
第一种通过.获取
第二种通过[]获取
那什么时候用点获取什么时候[]呢，可以在不同场景使用
两个的相同点：都是获取对象属性值
不同点：
1 [ ]运算符可以使用字符串变量的内容作为属性名，点运算符不能
普通常量赋值的时候可以用点运算符，其他可以用[]运算符，
是这样的，一开始需要获取某一个元素的 left 值，我就用 ele.style.left 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。
好吧，追本溯源，问题的根源以及区别就在这里了。
所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。
特点：
- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。
currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。
和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )
关于 getComputedStyle 返回的值，具体查看这里。
不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。
关于 ele.style 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。
然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。
element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。
参考链接 chokcoco的博客园
