轻松掌握JS正则：一招提取图片src属性，告别繁琐操作

一、正则表达式基础

正则表达式（Regular Expression）是一种用于处理字符串的强大工具。它可以用来匹配字符串中的特定模式，从而实现字符串的搜索、替换和提取等操作。

在JavaScript中，我们可以使用RegExp对象来创建正则表达式，并使用它提供的各种方法进行操作。

二、提取图片src属性

function extractImageSrc(htmlStr) {
  // 匹配img标签
  var imgReg = /<img[^>]*>/gi;
  // 提取src属性
  var srcReg = /src="([^"]*)"/gi;
  var results = [];
  var imgTags = htmlStr.match(imgReg);
  if (imgTags) {
    imgTags.forEach(function (imgTag) {
      var srcMatch = imgTag.match(srcReg);
      if (srcMatch) {
        results.push(srcMatch[1]);
      }
    });
  }
  return results;
}

// 示例
var htmlStr = '<img src="http://example.com/image1.jpg" alt="image1"><img src="http://example.com/image2.jpg" alt="image2">';
var srcList = extractImageSrc(htmlStr);
console.log(srcList); // 输出：["http://example.com/image1.jpg", "http://example.com/image2.jpg"]

在上面的代码中，我们首先定义了一个extractImageSrc函数，它接收一个HTML字符串作为参数。然后，我们使用imgReg正则表达式匹配所有的img标签，并使用srcReg正则表达式提取每个img标签中的src属性值。最后，将提取到的src属性值存储在results数组中，并返回该数组。

三、实用技巧

使用非贪婪匹配：在正则表达式中，使用?可以使量词变为非贪婪模式，从而避免匹配过多的字符。在上面的示例中，[^>]*和([^"]*)都是非贪婪匹配。

使用捕获组：在正则表达式中，使用括号()可以将匹配到的内容捕获起来。在上面的示例中，src="([^"]*)"就是一个捕获组，用于捕获src属性的值。

使用全局匹配：在正则表达式中，使用g修饰符可以实现全局匹配，从而匹配所有的匹配项。在上面的示例中，imgReg和srcReg都使用了g修饰符。