本文详细介绍如何从HTML字符串中提取所有脚本标签的src属性。针对HTML结构化数据的提取，强烈推荐使用JavaScript的DOM解析器DOMParser而非正则表达式，以确保解析的健壮性和准确性。文章将提供详细的示例代码，展示如何利用querySelectorAll和getAttribute实现这一目标，并探讨浏览器环境下的简化操作及相关注意事项。
为何不推荐使用正则表达式解析HTML
在处理html这类结构化文档时，许多开发者会首先想到使用正则表达式。然而，html的复杂性（例如嵌套标签、属性的多种写法、注释等）使得编写一个能够可靠解析所有有效html的正则表达式几乎不可能，且极易出错。正则表达式擅长处理扁平的、模式固定的文本，但对于具有层级结构的文档，其能力有限。一旦html结构发生微小变化，原有的正则表达式可能就会失效。因此，对于html内容的解析和提取，使用专门的dom（文档对象模型）解析器是更专业、更可靠的方法。
使用DOMParser解析HTML字符串
JavaScript提供了DOMParser接口，允许我们将HTML或XML字符串解析成一个DOM文档对象。一旦字符串被解析为DOM对象，我们就可以像操作浏览器中的document对象一样，利用其提供的各种API（如querySelector、querySelectorAll等）来查询和提取所需元素。
1. 创建HTML字符串
首先，我们需要一个包含目标脚本标签的HTML字符串作为示例。
const html_code = `<html> <head> <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script> <script src="/assets/script.js"></script> </head> <body> <script> var code = 'nope'; // 这是一个内联脚本，没有src属性 </script> <p>其他内容</p> <footer><script src="/assets/footer.js"></script></footer> </body> </html>`;
2. 初始化DOM解析器并解析字符串
DOMParser的实例可以解析不同类型的文本。对于HTML，我们需指定MIME类型为text/html。
const parser = new DOMParser(); const html_doc = parser.parseFromString(html_code, 'text/html');
parseFromString方法会将html_code字符串转换成一个Document对象，该对象具有完整的DOM结构。
立即学习“Java免费学习笔记（深入）”；
3. 查询并提取src属性
现在，我们可以利用DOM对象的querySelectorAll方法来查找所有带有src属性的<script>标签。script[src]是一个CSS选择器，它会匹配所有script标签中包含src属性的元素。
const script_tags = html_doc.querySelectorAll('script[src]');
querySelectorAll返回的是一个NodeList，它是一个类似数组的对象。为了方便使用map等数组方法，我们通常会将其转换为真正的数组。
const sources = Array.from(script_tags).map((s) => s.getAttribute('src')); console.log(sources); // 预期输出: // [ // "https://code.jquery.com/jquery-3.7.0.slim.min.js", // "/assets/script.js", // "/assets/footer.js" // ]
getAttribute(‘src’)方法用于获取每个脚本标签的src属性值。
完整示例代码
将上述步骤整合，得到完整的代码如下：
const html_code = `<html> <head> <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script> <script src="/assets/script.js"></script> </head> <body> <script> var code = 'nope'; </script> <p>其他内容</p> <footer><script src="/assets/footer.js"></script></footer> </body> </html>`; const parser = new DOMParser(); const html_doc = parser.parseFromString(html_code, 'text/html'); const script_tags = html_doc.querySelectorAll('script[src]'); const sources = Array.from(script_tags).map((s) => s.getAttribute('src')); console.log(sources);
浏览器环境下的简化操作
如果在浏览器环境中，并且你想要提取的是当前页面DOM中的脚本标签，那么无需使用DOMParser来解析字符串，可以直接使用document对象：
// 假设在浏览器控制台中运行 const current_page_sources = Array.from(document.querySelectorAll('script[src]')).map((s) => s.getAttribute('src')); console.log(current_page_sources);
这会获取当前HTML文档中所有带有src属性的<script>标签的URL。
注意事项与最佳实践
- DOM解析的优势： 使用DOMParser解析HTML是处理结构化数据的最佳实践。它能够正确处理HTML的嵌套、属性值中的特殊字符、注释以及不规范的HTML结构（浏览器通常会自动修复），提供了比正则表达式更健壮、更准确的解析能力。
- 选择器script[src]的含义： 这个CSS选择器非常关键。script匹配所有<script>标签，而[src]则进一步筛选出那些拥有src属性的<script>标签。这确保我们只获取外部脚本的链接，而忽略内联脚本（如<script>var x=1;</script>）。
- 安全性考量： 如果你正在解析来自外部或不受信任源的HTML字符串，需要格外小心。DOMParser会创建一个完整的DOM树，如果其中包含恶意脚本或内容，直接将其插入到当前文档中可能会导致安全漏洞（XSS）。在教程示例中，我们只是提取属性，并未将其插入到现有DOM，因此风险较低。但如果后续操作涉及DOM操作，务必对输入进行严格的净化。
- 环境兼容性： DOMParser是一个Web API，在现代浏览器和Node.js环境中（通过jsdom等库模拟浏览器环境）均可使用。
总结
从HTML字符串中提取特定信息，尤其是结构化数据，应优先选择DOM解析器而非正则表达式。通过DOMParser将HTML字符串转换为可操作的DOM对象，然后利用querySelectorAll配合CSS选择器script[src]，我们可以高效且准确地获取所有外部脚本的src属性。这种方法不仅代码可读性强，而且对HTML结构变化的鲁棒性也远超正则表达式，是处理HTML内容的专业且推荐的方式。
css javascript java jquery html js node.js node 正则表达式 浏览器 JavaScript css 正则表达式 html xss xml 字符串 接口 var map JS 对象 dom 选择器