js正则 获取元素属性值

JavaScript019

js正则 获取元素属性值,第1张

一、获取img标签的src属性值

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 [ ]运算符可以使用字符串变量的内容作为属性名，点运算符不能

普通常量赋值的时候可以用点运算符，其他可以用[]运算符，

在 JavaScript 中，可以使用 getAttribute() 方法来获取自定义标签的自定义属性值。

<my-tag data-custom-attribute="value"></my-tag>

<script>

var myTag = document.querySelector("my-tag")

var customAttributeValue = myTag.dataset.customAttribute

console.log(customAttributeValue)// Output: "value"

</script>