js正则 获取元素属性值

JavaScript09

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

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

1、首先来看下测试代码，html里，主要部分有二个input输入框，和一个按钮。

2、在js代码里，借助Jquery插件库来操作，以减少代码，所以先引入对应的脚本库文件。

3、js代码里，为按钮添加点击事件，点击后，就用jquery设置姓名输入框的disabled属性，设置为false，这样输入框就不能输入了，为禁止状态了。只要调用jquery的 attr方法，然后输入属性的名称和值就行了：$("#name").attr('disabled', true)。

4、运行页面，可以看到现在的输入框是可以输入的，是正常状态的，点击一下“修改”按钮。

5、点击后，输入框就变成了禁止状态了，成功设置了输入框的属性。