标签的src属性
" />
使用DOMParser解析HTML字符串
JavaScript提供了DOMParser接口，它允许我们将HTML或XML字符串解析成一个可操作的DOM文档对象。这种方法是处理HTML字符串的标准且推荐的方式，因为它能准确模拟浏览器解析HTML的行为，并提供强大的DOM API来遍历和操作元素。
以下是如何使用DOMParser将HTML字符串转换为DOM文档的示例：
const html_code = `其他内容
`; // 创建一个DOMParser实例 const parser = new DOMParser(); // 使用parseFromString方法解析HTML字符串 // 第一个参数是待解析的字符串，第二个参数指定MIME类型为'text/html' const html_doc = parser.parseFromString(html_code, 'text/html'); console.log("解析后的DOM文档:", html_doc);
执行上述代码后，html_doc将是一个完整的Document对象，我们可以像操作浏览器中的document对象一样来操作它。
立即学习“前端免费学习笔记（深入）”；
提取
一旦我们有了DOM文档对象，就可以利用其提供的querySelectorAll方法，结合CSS选择器来精准地查找目标元素。对于提取所有带有src属性的
querySelectorAll方法返回一个NodeList，它是一个类似数组的对象，包含所有匹配的元素。为了方便地进行迭代和数据转换，我们通常会将其转换为真正的数组，然后使用map方法来提取每个元素的src属性。
const html_code = `其他内容
`; const parser = new DOMParser(); const html_doc = parser.parseFromString(html_code, 'text/html'); // 使用querySelectorAll查找所有带有src属性的script标签 const script_tags = html_doc.querySelectorAll('script[src]'); // 将NodeList转换为数组，并使用map方法提取每个script标签的src属性值 const sources = Array.from(script_tags).map((s) => s.getAttribute('src')); console.log("提取到的脚本源URL:", sources); // 预期输出: ["https://code.jquery.com/jquery-3.7.0.slim.min.js", "/assets/script.js", "/assets/footer.js"]
在这个例子中，script[src]选择器确保我们只选取那些明确定义了src属性的
在浏览器环境中直接提取
如果您的HTML内容已经存在于当前的浏览器DOM中，例如您想从当前页面中提取所有脚本的src，那么您不需要使用DOMParser。可以直接使用document.querySelectorAll方法来完成相同的任务：
// 假设您在浏览器控制台中运行此代码
// 它将从当前页面的DOM中提取所有带有src属性的script标签的URL
const current_page_script_sources = Array.from(document.querySelectorAll('script[src]')).map((s) => s.getAttribute('src'));
console.log("当前页面脚本源URL:", current_page_page_script_sources);注意事项
- 安全性： 当处理来自不可信源的HTML字符串时，请务必小心。虽然DOMParser本身不会执行脚本，但将解析后的内容插入到实际DOM中可能会引入跨站脚本攻击（XSS）的风险。在展示或操作外部HTML时，应进行适当的净化和验证。
- 性能： 对于非常庞大或复杂的HTML字符串，DOMParser的解析可能会消耗一定的性能。在极端情况下，如果需要处理海量HTML，可能需要考虑流式解析或其他更优化的方案。
- 非标准HTML： DOMParser会尽力解析非标准的HTML，但如果HTML结构严重损坏，可能无法得到预期的DOM结构。
总结
从HTML字符串中提取特定信息，特别是像
