如何使用正确正则表达式从字符串中提取src属性值 JS实现示例

问题说明 #

你当前使用的/^src/g正则无法正确匹配的原因：

• ^定位符仅匹配整个字符串的起始位置，src属性在你的字符串中间位置，无法触发匹配
• 没有配置属性值的捕获规则，会连带后续多余内容一起返回

正确实现代码 #

var str = "<iframe width=\"1000\" height=\"460\" src=\"https://myvideo.dpdhl.com/video/CuEt8XJ8uVEU3MZrrjQp5z\" title=\"Test Video for New Component\"></iframe>";

// 正则规则：匹配src="前缀，捕获直到下一个"前的所有内容
var re = /src="([^&]+)"/;
var matchRes = str.match(re);
var srcVal = matchRes ? matchRes[1] : '';

// 可选：解码转义的特殊字符，恢复正常链接格式
srcVal = srcVal.replace(/:/g, ':');
console.log(srcVal);
// 输出：https://myvideo.dpdhl.com/video/CuEt8XJ8uVEU3MZrrjQp5z

多src匹配方案 #

如果字符串中存在多个src属性需要提取，给正则加g全局修饰符后循环遍历捕获即可：

var reGlobal = /src="([^&]+)"/g;
var srcList = [];
var temp;
while((temp = reGlobal.exec(str)) !== null) {
  var val = temp[1].replace(/:/g, ':');
  srcList.push(val);
}
console.log(srcList);

内容的提问来源于stack exchange，提问作者art