在JavaScript中，解析HTML字符串并提取链接（href、action、src等属性）时，可以使用以下工具库或原生API：
1. 浏览器原生API（无需第三方库）
DOMParser
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, "text/html");
// 提取所有链接
const links = Array.from(doc.querySelectorAll("[href], [src], [action]"));
links.forEach(element => {
const href = element.getAttribute("href") || element.getAttribute("src") || element.getAttribute("action");
console.log(href);
});
优点：无需依赖第三方库，兼容现代浏览器。
缺点：需要手动处理相对路径转绝对路径。
URL API（补全相对路径）
const baseUrl = "https://example.com";
const absoluteUrl = new URL(relativePath, baseUrl).href;
2. 第三方解析库
Cheerio（Node.js环境推荐）
类似jQuery的语法，适合服务端解析：
const cheerio = require('cheerio');
const $ = cheerio.load(htmlString);
$('[href], [src], [action]').each((i, elem) => {
const url = $(elem).attr('href') || $(elem).attr('src') || $(elem).attr('action');
console.log(url);
});
优点：轻量级，API友好。
缺点：仅限Node.js环境使用。
JSDOM（浏览器/Node.js通用）
模拟完整DOM环境：
const { JSDOM } = require('jsdom');
const dom = new JSDOM(htmlString);
const document = dom.window.document;
document.querySelectorAll('[href], [src], [action]').forEach(el => {
const url = el.href || el.src || el.action;
console.log(url);
});
优点：支持完整的DOM操作。
缺点：体积较大。
Linkify（专注URL提取）
专门用于从文本/HTML中提取URL：
import linkify from 'linkifyjs';
const links = linkify.find(htmlString);
console.log(links.map(link => link.href));
优点：精准识别文本中的URL。
缺点：不处理HTML标签属性。
3. 注意事项
- 相对路径转绝对路径：使用
new URL(relativePath, baseUrl).href。 - 过滤无效值：排除
javascript:void(0)或空属性。 - 去重: 用
Set存储结果避免重复。
完整示例（浏览器环境）
function extractUrlsFromHtml(htmlString, baseUrl) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, "text/html");
const urls = new Set();
doc.querySelectorAll('[href],[src],[action]').forEach(el => {
let url = el.getAttribute('href') || el.getAttribute('src') || el.getAttribute('action');
if (url && !url.startsWith('javascript:')) {
urls.add(new URL(url, baseUrl).href); // 转为绝对路径
}
});
return Array.from(urls);
}
// Usage
const htmlSnippet = `
<a href="/about">About</a>
<img src="image.png">
<form action="/submit"></form>
`;
console.log(extractUrlsFromHtml(htmlSnippet, "https://example.com"));
// Output: ["https://example.com/about", "https://example.com/image.png", "https://example.com/submit"]
根据你的运行环境（浏览器/Node.js）和需求选择合适的方法即可！
内容由零声教学AI助手提供，问题来源于学员提问
&1 请帮我分析有什么问题，这是在操作shar..." />
