本教程详细介绍了如何使用JavaScript的DOM解析技术，从HTML字符串中高效、准确地提取所有<script>标签的src属性。文章强调了避免使用正则表达式解析HTML的重要性，并通过DOMParser、querySelectorAll和getAttribute等API，提供了清晰的代码示例和步骤，帮助开发者获取所需的脚本URL列表。
在web开发中，我们经常需要从html内容中提取特定信息，例如获取所有<script>标签的src属性，以便了解页面加载了哪些外部脚本。虽然正则表达式（regex）在字符串匹配方面功能强大，但它并不适合解析复杂的html结构。html是一种标记语言，其嵌套和不规则的特性使得使用正则表达式进行可靠的解析变得极其困难且容易出错。
为什么不推荐使用正则表达式解析HTML
HTML的结构是树状的，包含开始标签、结束标签、属性以及嵌套关系。正则表达式是基于文本模式匹配的，难以准确地处理：
- 嵌套结构： 例如，一个<script>标签内部可能包含注释或其他文本，这些都可能干扰简单的正则匹配。
- 属性变化： 属性的顺序、是否存在、单引号或双引号等都可能变化。
- HTML的灵活性： 浏览器通常能容忍一些不规范的HTML，但正则表达式对模式的匹配非常严格。
因此，对于HTML内容的解析，更推荐使用专门的DOM（Document Object Model）解析器。
使用JavaScript DOM解析从HTML字符串中提取脚本源
JavaScript提供了DOMParser API，允许我们将HTML或XML字符串解析成一个DOM文档对象，然后就可以像操作浏览器中的document对象一样，使用标准的DOM方法来查询和提取信息。
核心步骤
- 创建DOMParser实例： new DOMParser()。
- 解析HTML字符串： 使用parser.parseFromString(htmlString, ‘text/html’)将HTML字符串转换为一个DOM文档对象。
- 选择目标元素： 利用document.querySelectorAll()方法，根据CSS选择器来查找所有带有src属性的<script>标签。
- 提取属性值： 遍历找到的元素列表，使用element.getAttribute(‘src’)来获取每个标签的src属性值。
示例代码
以下代码演示了如何从一个包含多个<script>标签的HTML字符串中，提取所有外部脚本的URL：
立即学习“Java免费学习笔记（深入）”；
// 待解析的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> // 这是一个内联脚本，没有src属性 var code = 'nope'; </script> <p>其他内容</p> <footer><script src="/assets/footer.js"></script></footer> </body> </html>`; // 1. 创建DOMParser实例 const parser = new DOMParser(); // 2. 将HTML字符串解析为DOM文档对象 // 'text/html' 指示解析器将字符串作为HTML文档处理 const html_doc = parser.parseFromString(html_code, 'text/html'); // 3. 使用querySelectorAll选择所有带有'src'属性的<script>标签 // 'script[src]' 是一个CSS选择器，表示选择所有标签名为'script'且包含'src'属性的元素 const script_tags = html_doc.querySelectorAll('script[src]'); // 4. 将NodeList转换为数组，并使用map方法提取每个标签的'src'属性值 const sources = Array.from(script_tags).map((s) => s.getAttribute('src')); // 输出提取到的所有脚本源URL console.log(sources); // 预期输出: [ 'https://code.jquery.com/jquery-3.7.0.slim.min.js', '/assets/script.js', '/assets/footer.js' ]
代码解析：
- html_code：这是一个多行字符串，模拟了我们可能需要解析的HTML内容。
- new DOMParser()：创建一个新的DOM解析器对象。
- parser.parseFromString(html_code, ‘text/html’)：这是核心步骤，它将HTML字符串解析成一个Document对象，这个对象拥有与浏览器document对象类似的DOM操作能力。
- html_doc.querySelectorAll(‘script[src]’)：这个方法返回一个NodeList，包含了所有匹配CSS选择器script[src]的元素。script[src]精确地选中了所有具有src属性的<script>标签，从而排除了内联脚本。
- Array.from(script_tags).map((s) => s.getAttribute(‘src’))：querySelectorAll返回的是一个NodeList，它不是标准的JavaScript数组。为了方便使用map等数组方法，我们首先使用Array.from()将其转换为一个真正的数组。然后，map方法遍历数组中的每个<script>元素，并调用getAttribute(‘src’)来获取其src属性的值。
浏览器环境中直接获取脚本源
如果你的目标HTML内容已经加载在当前的浏览器页面中，并且你希望获取的是当前页面中所有外部脚本的src，那么你甚至不需要DOMParser。可以直接使用document对象：
// 在浏览器控制台中运行此代码，它将返回当前页面所有外部脚本的src console.log( Array.from(document.querySelectorAll('script[src]')).map((s) => s.getAttribute('src')) );
这与上述示例的核心逻辑相同，只是操作对象从解析后的html_doc变为了全局的document对象。
注意事项
- 避免正则表达式解析HTML： 再次强调，对于复杂的HTML解析任务，正则表达式几乎总是错误的工具。它会导致脆弱、难以维护且容易出错的代码。
- DOMParser的兼容性： DOMParser在现代浏览器中得到了广泛支持。对于非常老旧的浏览器（如IE9及以下），可能需要Polyfill或使用其他方法。
- 错误处理： 如果传入的HTML字符串格式不正确，DOMParser会尝试解析，但结果可能不符合预期。在生产环境中，应考虑对解析结果进行健壮性检查，例如检查html_doc.body是否为空或是否存在解析错误（可以通过html_doc.querySelector(‘parsererror’)来检测）。
- 服务器端环境： 如果在Node.js等服务器端环境中需要解析HTML，DOMParser不是原生可用的。你需要使用像jsdom或cheerio这样的库，它们提供了与浏览器DOM API类似的接口，可以方便地解析和操作HTML。
总结
通过本教程，我们学习了如何利用JavaScript的DOMParser API，以一种健壮和标准化的方式从HTML字符串中提取<script>标签的src属性。这种方法避免了正则表达式在解析HTML时固有的缺陷，确保了代码的可靠性和可维护性。无论是在客户端处理动态HTML内容，还是在构建需要解析HTML的工具时，DOM解析都是提取结构化信息的首选方法。
css javascript java jquery html js node.js node 正则表达式 浏览器 工具 JavaScript css 正则表达式 html Array Object xml 字符串 接口 Regex map JS 对象 dom 选择器