为什么不推荐使用正则表达式解析HTML
在javascript中，当需要从html内容中提取特定信息，例如脚本标签的src属性时，许多开发者首先会想到使用正则表达式。然而，html是一种上下文无关的语言，其结构复杂且允许嵌套，这使得使用正则表达式进行可靠的解析变得极其困难且容易出错。例如，一个简单的<script>标签可能包含其他属性、注释、或者自身嵌套在更复杂的结构中，正则表达式很难准确地匹配所有有效情况，同时排除无效情况。因此，对于html内容的解析，更推荐使用专门的dom解析器。
使用DOM解析器提取脚本src属性
JavaScript提供了强大的DOM（文档对象模型）解析能力，无论是处理独立的HTML字符串还是当前浏览器环境中的DOM，都能以结构化的方式进行操作。
1. 解析HTML字符串并提取src
当你的HTML内容是一个字符串时，可以使用DOMParser API将其转换为一个可操作的DOM文档。这个方法在Node.js环境（通过第三方库如jsdom）或浏览器环境中都适用。
核心步骤：
- 创建一个DOMParser实例。
- 使用parseFromString()方法将HTML字符串解析为Document对象。
- 使用querySelectorAll()方法选择所有带有src属性的<script>标签。
- 遍历选中的元素，提取其src属性值。
示例代码：
立即学习“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字符串解析为Document对象
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. 遍历选中的元素，提取其src属性值
// Array.from() 用于将NodeList转换为数组，以便使用map方法
const sources = Array.from(script_tags).map((s) => s.getAttribute('src'));
console.log("从HTML字符串中提取的脚本源：");
console.log(sources);
// 预期输出: ["https://code.jquery.com/jquery-3.7.0.slim.min.js", "/assets/script.js", "/assets/footer.js"]代码解释：
- DOMParser()：这是一个构造函数，用于创建解析HTML或XML字符串的对象。
- parser.parseFromString(html_code, 'text/html')：此方法将html_code字符串解析为一个Document对象。第二个参数'text/html'指定了解析的MIME类型。
- html_doc.querySelectorAll('script[src]')：这是一个非常强大的方法，它接受一个CSS选择器字符串，并返回一个包含所有匹配元素的NodeList。script[src]精确地选择了所有拥有src属性的<script>元素。
- Array.from(script_tags).map((s) => s.getAttribute('src'))：由于querySelectorAll返回的是NodeList（一个类似数组的对象），我们使用Array.from()将其转换为真正的数组，然后使用map()方法遍历每个script元素，并通过getAttribute('src')获取其src属性的值。
2. 在浏览器环境中直接提取src
如果你的目标是当前浏览器页面中已存在的DOM结构，则无需使用DOMParser。可以直接通过document对象来查询元素。
示例代码：
立即学习“Java免费学习笔记（深入）”；
// 假设这是在浏览器控制台或页面脚本中运行
// 它会查找当前文档中所有带有src属性的<script>标签
const browser_sources = Array.from(document.querySelectorAll('script[src]')).map((s) => s.getAttribute('src'));
console.log("从当前浏览器DOM中提取的脚本源：");
console.log(browser_sources);这个方法与处理HTML字符串的逻辑基本相同，只是将html_doc替换为全局的document对象。
注意事项与最佳实践
- 安全性： 当处理来自不可信源的HTML字符串时，务必注意潜在的安全风险（如XSS攻击）。在将外部HTML内容插入到页面之前，应进行适当的净化和验证。
- 性能： 对于非常大的HTML字符串，DOM解析可能会消耗较多的内存和CPU资源。在性能敏感的应用中，应进行测试和优化。
- CSS选择器： 熟练使用CSS选择器是有效利用querySelectorAll的关键。例如，script:not([src])可以选择所有没有src属性的脚本标签（即内联脚本）。
- 错误处理： parseFromString在解析无效HTML时不会抛出错误，但生成的Document对象可能不完整或不符合预期。在实际应用中，可能需要检查解析结果的有效性。
总结
通过利用JavaScript的DOM解析能力，我们可以以一种健壮、高效且易于维护的方式从HTML内容中提取所需信息，例如脚本标签的src属性。相比于复杂的正则表达式，DOM解析器提供了更结构化和语义化的方法来处理HTML，是处理HTML内容的推荐实践。无论是从独立的HTML字符串还是从浏览器当前的DOM中提取数据，DOMParser和document.querySelectorAll都是你的强大工具。
