js正则 获取元素属性值

JavaScript015

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、“.” 操作

2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样

2、“class” 属性写成 “className”

3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

js操作属性

《script type=text/javascript》

widow。onload = function（）{  全部加载渲染完之后才执行下一步

  document。getElementById（div1）。title= 我看到了；

《/script》

《body》

  《div id = div1 class = div1 title = 这是一个div元素，你看到了吗？》

《/body》

在js中有类似font-size这类似的系统回默认为-号，可以用小驼峰  fontSize写法

class属性

需要在class后面加Name

中括号

需要在变量加上中括号。[color]写法

style的写法['style']

  document。write 只能重绘整个页面

innerhtml 可以重绘页面的一部分。