JS实现URL裁剪、条件拼接、复制及新标签打开功能求助

可直接运行的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>URL提取工具</title>
    <style>
        .container { width: 80%; max-width: 800px; margin: 50px auto; }
        input { width: 100%; padding: 10px; margin: 10px 0; font-size: 16px; }
        .btn-group { margin: 15px 0; display: flex; gap: 10px; }
        button { padding: 8px 16px; cursor: pointer; }
        .result-box { padding: 15px; border: 1px solid #eee; margin-top: 20px; min-height: 50px; }
    </style>
</head>
<body>
<div class="container">
    <h3>粘贴URL到输入框</h3>
    <input type="text" id="urlInput" placeholder="请粘贴完整URL，例如：https://kalamajka.aa1.anythig.com/ert/eer/ui/eerr/dda1d">
    <div class="btn-group">
        <button id="extractBtn">提取主机名</button>
        <button id="copyBtn">复制主机名</button>
        <button id="openBtn">打开生成链接</button>
    </div>
    <div class="result-box" id="resultBox"></div>
</div>

<script>
    // 封装公共提取逻辑，所有需要主机名的地方直接调用这个函数拿返回值
    function getHostname() {
        const inputEl = document.getElementById('urlInput')
        const inputVal = inputEl.value.trim()
        if (!inputVal) return null
        try {
            // 自动补全https前缀，兼容用户粘贴时漏写协议的情况
            const parseUrl = inputVal.startsWith('http') ? inputVal : `https://${inputVal}`
            const urlObj = new URL(parseUrl)
            return urlObj.hostname
        } catch (err) {
            // URL格式不合法时返回null
            return null
        }
    }

    // 提取并显示结果
    document.getElementById('extractBtn').addEventListener('click', () => {
        const resultBox = document.getElementById('resultBox')
        const hostname = getHostname()
        if (!hostname) {
            resultBox.textContent = 'Please copy the full url'
            return
        }
        resultBox.textContent = `提取到的主机名：${hostname}`
    })

    // 复制到剪贴板
    document.getElementById('copyBtn').addEventListener('click', async () => {
        const hostname = getHostname()
        const resultBox = document.getElementById('resultBox')
        if (!hostname) {
            resultBox.textContent = 'Please copy the full url'
            return
        }
        try {
            await navigator.clipboard.writeText(hostname)
            resultBox.textContent = `已复制到剪贴板：${hostname}`
        } catch (err) {
            // 兼容旧浏览器的降级复制方案
            const input = document.createElement('input')
            input.value = hostname
            document.body.appendChild(input)
            input.select()
            document.execCommand('copy')
            document.body.removeChild(input)
            resultBox.textContent = `已复制到剪贴板：${hostname}`
        }
    })

    // 拼接后缀并新标签页打开
    document.getElementById('openBtn').addEventListener('click', () => {
        const hostname = getHostname()
        const resultBox = document.getElementById('resultBox')
        if (!hostname) {
            resultBox.textContent = 'Please copy the full url'
            return
        }
        // 条件判断拼接后缀
        const targetPath = hostname.includes('aa1') ? '/elment/path' : '/path/toelement'
        const targetUrl = `https://${hostname}${targetPath}`
        // 新标签页打开
        window.open(targetUrl, '_blank')
        resultBox.textContent = `生成的目标链接：${targetUrl}`
    })
</script>
</body>
</html>

核心逻辑说明 #

1. 主机名提取 #

不用照搬Excel里逐字符查找替换的复杂逻辑，JS原生提供了专门处理URL的URL构造函数，只要传入合法URL字符串，就能通过.hostname属性直接拿到主机名，自动处理http/https前缀、端口、路径等所有部分，比手动写字符串查找逻辑容错率高得多，不会因为URL斜杠数量变化出现解析错误。
示例：

const url = new URL('https://kalamajka.aa1.anythig.com/ert/eer/ui/eerr/dda1d')
console.log(url.hostname) // 直接输出 kalamajka.aa1.anythig.com

用try/catch包裹解析逻辑，URL格式不合法时直接返回错误提示，和Excel公式里的IFERROR逻辑完全等效。

2. JS跨函数获取返回值方法 #

把公共的提取逻辑封装成独立函数，函数内部用return返回最终结果，其他所有需要用到主机名的功能（复制、打开链接），只需要直接调用这个函数，就能拿到对应的返回值，不需要重复写解析逻辑，也不用搞复杂的变量传递。
核心写法参考：

// 封装公共函数，执行完成后返回结果
function 公共功能() {
  // 内部逻辑处理
  return 处理结果
}

// 其他任意函数里都可以直接调用拿结果
function 其他功能() {
  const 需要的结果 = 公共功能()
  // 后续逻辑直接用这个结果即可
}

新手阶段优先用这种拆分小函数的写法，逻辑清晰，维护起来也简单。

3. 其他功能实现 #

• 剪贴板复制：优先用现代浏览器支持的navigator.clipboard.writeText()方法，代码中加了旧浏览器兼容的降级方案，避免权限问题导致复制失败。
• 条件拼接：用字符串的includes()方法判断主机名是否包含aa1字段，对应拼接不同的后缀路径即可。
• 新标签页打开：window.open(目标链接, '_blank')即可实现，只要这个方法是在用户点击按钮的事件回调里直接触发，就不会被浏览器的弹窗拦截机制拦截。

注意事项 #

• 本地直接双击打开HTML文件时，部分浏览器会限制剪贴板API权限，用本地静态服务器打开即可正常使用所有功能。
• 代码里加了自动补全https://前缀的容错逻辑，用户粘贴链接时漏写协议头也能正常解析。

内容的提问来源于stack exchange，提问作者Ádám Szabó