解析 URL | Welcome👋

解析 URL 是将一个完整的 URL 分解成各个部分，如协议、主机名、路径、查询参数等。JavaScript 中可以使用内置的 URL 对象来实现这一功能。

下面是一个示例，展示如何解析 URL 并获取各个部分：

javascript

function parseURL(url) {
    // 使用内置的 URL 对象解析给定的 URL
    const parsedURL = new URL(url);

    // 获取各个部分
    const protocol = parsedURL.protocol;
    const host = parsedURL.host;
    const hostname = parsedURL.hostname;
    const port = parsedURL.port;
    const pathname = parsedURL.pathname;
    const search = parsedURL.search;
    const searchParams = parsedURL.searchParams;
    const hash = parsedURL.hash;

    // 将结果输出
    return {
        protocol,
        host,
        hostname,
        port,
        pathname,
        search,
        searchParams: Array.from(searchParams.entries()),
        hash
    };
}

// 示例测试
const url = "https://www.example.com:8080/path/to/page?name=JohnDoe&age=25#section";
const parsed = parseURL(url);
console.log(parsed);

输出的结果如下：

json

{
    "protocol": "https:",
    "host": "www.example.com:8080",
    "hostname": "www.example.com",
    "port": "8080",
    "pathname": "/path/to/page",
    "search": "?name=JohnDoe&age=25",
    "searchParams": [
        ["name", "JohnDoe"],
        ["age", "25"]
    ],
    "hash": "#section"
}

这个代码利用了 JavaScript 的 URL 对象来解析给定的 URL 并提取其各个组成部分。URL 对象提供了一个简单且强大的方式来处理和操作 URL。

解析a标签链接

当然，可以使用字符串操作来解析出 HTML 中的链接，而不是依赖正则表达式。下面是一个示例，展示如何在 JavaScript 中通过字符串操作来解析 HTML 并提取其中的链接：

javascript

function parseHTMLLinks(html) {
    let links = [];
    let pos = 0;

    while (pos < html.length) {
        // 找到下一个 <a> 标签的起始位置
        let startLink = html.indexOf('<a ', pos);
        if (startLink === -1) {
            break; // 没有更多的 <a> 标签
        }

        // 找到 href 属性的起始位置
        let startHref = html.indexOf('href="', startLink);
        if (startHref === -1) {
            pos = startLink + 2;
            continue; // 没有找到 href 属性，继续寻找下一个 <a> 标签
        }
        startHref += 6; // 跳过 href=" 这6个字符

        // 找到 href 属性的结束位置
        let endHref = html.indexOf('"', startHref);
        if (endHref === -1) {
            break; // 没有找到 href 属性的结束引号，退出
        }

        // 提取 href 属性的值
        let link = html.substring(startHref, endHref);
        links.push(link);

        // 更新当前位置
        pos = endHref + 1;
    }

    return links;
}

// 示例测试
const html = `
<html>
<body>
    <a href="https://www.example.com">Example</a>
    <a href="https://www.google.com">Google</a>
    <a href="https://www.openai.com">OpenAI</a>
</body>
</html>
`;

const links = parseHTMLLinks(html);
console.log(links); // 输出：["https://www.example.com", "https://www.google.com", "https://www.openai.com"]

解释

初始化：创建一个空数组 links 来存储找到的链接，定义一个变量 pos 来跟踪当前解析的位置。
循环查找：
- 使用 indexOf 方法找到下一个 <a 标签的起始位置。如果找不到，则退出循环。
- 在找到 <a 标签后，继续寻找 href=" 属性的位置。如果找不到 href="，则继续寻找下一个 <a 标签。
- 确定 href=" 的起始位置后，再找其结束引号的位置。
提取链接：使用 substring 方法从 href=" 的起始位置和结束引号之间提取链接，并将其添加到 links 数组中。
更新位置：将当前解析的位置更新到刚找到的 href 属性结束的位置，继续循环以查找下一个链接。

这个方法通过字符串操作来解析 HTML，从而找到所有的 <a> 标签中的 href 属性值，并返回这些链接。这样可以避免使用正则表达式，直接使用基本的字符串操作来完成任务。

解析a标签链接 ​

解释 ​

解析a标签链接

解释