如何通过正则表达式获取字符串的匹配结果？

架构老林

2026-7-21

提取HTML字符串中script标签的src属性值

方法一：正则表达式结合`exec()`循环收集结果

适合结构简单的HTML字符串，正则可匹配大部分常规的script标签src属性：

const htmlStr = '<html><head><script src="http://example.com"></script><script src=\'https://test.org/script.js\'></script>...</html>';
const srcRegex = /script\s+src=["']([^"']+)["']/gi;
const srcList = [];
let matchResult;

// 循环执行正则匹配，收集所有符合条件的src值
while ((matchResult = srcRegex.exec(htmlStr)) !== null) {
  srcList.push(matchResult[1]);
}

console.log(srcList); // 输出：["http://example.com", "https://test.org/script.js"]

方法二：用`replace()`的回调函数收集结果

你原本想用replace()，其实可以利用它的回调函数提取并保存目标值，无需实际替换内容：

const htmlStr = '<html><head><script src="http://example.com"></script><script src=\'https://test.org/script.js\'></script>...</html>';
const srcList = [];

// 回调函数中第二个参数对应正则捕获组的内容，直接存入数组
htmlStr.replace(/script\s+src=["']([^"']+)["']/gi, (_, srcValue) => {
  srcList.push(srcValue);
  return ''; // 返回值不影响，我们只需要回调的执行逻辑
});

console.log(srcList);

方法三：用DOMParser解析HTML（最可靠）

如果HTML结构复杂（比如src属性前后有其他属性、标签换行、属性值包含特殊字符等），用浏览器原生的HTML解析器更准确：

const htmlStr = '<html><head><script src="http://example.com"></script><script src=\'https://test.org/script.js\'></script>...</html>';
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, 'text/html');

// 选中所有带src属性的script标签，提取属性值
const scriptTags = doc.querySelectorAll('script[src]');
const srcList = Array.from(scriptTags).map(tag => tag.getAttribute('src'));

console.log(srcList);