suchen

Heim  >  Fragen und Antworten  >  Hauptteil

js匹配<img>标签中的 src属性的值的正则怎么写?

假如有一段html字符串,想用js直接匹配到<img>标签中的 src属性的值的正则怎么写?可以考虑带有class、alt这些属性。

1

2

'<div><img src="http://www.baidu.com/pic/a.jpg" alt="" /><p>this is a pic</p><img src=

"http://www.baidu.com/pic/b.jpg"/><p>this is pic b</p></div>'

想得到的结果

1

2

3

4

[

'http://www.baidu.com/pic/a.jpg',

'http://www.baidu.com/pic/b.jpg'

]

而不是

1

2

3

4

[

'<img src="http://www.baidu.com/pic/a.jpg" alt="" />',

'<img src="http://www.baidu.com/pic/b.jpg" />'

]

js的正则不支持逆序环视,想不出还有什么方法可以直接匹配到src的值,求大牛指教。

高洛峰高洛峰3061 Tage vor1129

Antworte allen(2)Ich werde antworten

  • 欧阳克

    欧阳克2016-11-10 14:35:17

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    var frag = document.createElement('div');

    frag.innerHTML = '<div>\

        <img src="http: www.baidu.com="" pic="" a.jpg" alt=""  ="">\

        <p>this is a pic</p>\

        <img src="http: www.baidu.com="" pic="" b.jpg" ="">\

        <p>this is pic b</p>\

    </img src="http:></img src="http:></div>';

    var result = [].map.call(frag.querySelectorAll('img'), function(img){ return img.src });

     

    console.log(result);

    另外,match 的话 g 模式不支持输出匹配结果的,你只能使用 while + exec 才行。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    var str = '<div>\

        <img src="http: www.baidu.com="" pic="" a.jpg" alt=""  ="">\

        <p>this is a pic</p>\

        <img src="http: www.baidu.com="" pic="" b.jpg" ="">\

        <p>this is pic b</p>\

    </img src="http:></img src="http:></div>';

    var patt = /<img[^>]+src=['"]([^'"]+)['"]+/g;

    var result = [], temp;

     

    while( (temp= patt.exec(str)) != null ) {

        result.push(temp[1]);

    }

     

    console.log(result);</img[^>


    Antwort
    0
  • 三叔

    三叔2016-11-10 14:34:44

    不好意思,JS这部分我现在也是自己学,误会了你的意思。我去查了一下,有这样一个思路,你先匹配出img,然后再从中匹配出src

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    <script type="text javascript"="">

    var str = "this is test string 

    <img src=\"http:yourweb.com test.jpg\"width="'50' ">123 and the end 

    <img src=\"所有地址也能匹配.jpg\" > 

    <img src=\" uploads="" attached="" image="" 20120426="" 20120426225658_92565.png\" alt="\"\" /">"

    //匹配图片(g表示匹配所有结果i表示区分大小写)

    var imgReg = /<img.*?(?:>|\/>)/gi;

    //匹配src属性 

    var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;

    var arr = str.match(imgReg);

    alert('所有已成功匹配图片的数组:'+arr);

    for (var i = 0; i < arr.length; i++) {

      var src = arr[i].match(srcReg);

      //获取图片地址

      if(src[1]){

        alert('已匹配的图片地址'+(i+1)+':'+src[1]);

      }

      //当然你也可以替换src属性

     if (src[0]) {

        var t = src[0].replace(/src/i, "href");

     }

    }

    </img.*?(?:></img src=\"></img src=\"所有地址也能匹配.jpg\" ></img src=\"http:yourweb.com></script type="text>


    Antwort
    0
  • StornierenAntwort