如何在HTML文件中从外部网页获取DIV元素？功能实现求助

没问题，我帮你搞定这个！因为你只有基础HTML知识，我会写最易懂的代码，每一步都给你解释清楚～

咱们需要用一点点JavaScript来实现动态跳转（纯HTML做不到根据输入内容变化链接），不过放心，代码超简单，完全适合新手理解。

方案1：输入内容作为链接的一部分（固定前缀） #

比如你想输入关键词后，跳转到 https://你的目标网站.com/[输入内容] 这种格式的链接，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>自定义跳转工具</title>
</head>
<body>
    <!-- 输入框：让用户输入文本 -->
    <input type="text" id="inputText" placeholder="输入内容后点提交">
    <!-- 提交按钮 -->
    <button onclick="handleSubmit()">提交</button>

    <script>
        function handleSubmit() {
            // 获取输入框里的内容，同时去掉首尾空格
            const inputValue = document.getElementById('inputText').value.trim();
            
            // 检查用户有没有输入内容（防止空输入跳转出错）
            if (!inputValue) {
                alert('请输入内容哦！');
                return;
            }

            // 这里替换成你想要的固定前缀链接
            const baseUrl = 'https://example.com/';
            // 拼接成完整的目标链接
            const targetUrl = baseUrl + inputValue;
            
            // 在新标签页打开链接（如果想在当前页打开，把'_blank'改成'_self'）
            window.open(targetUrl, '_blank');
        }
    </script>
</body>
</html>

自定义修改点 #

• 把 const baseUrl = 'https://example.com/'; 里的网址换成你实际要用的前缀，比如如果是做搜索跳转，可以改成 https://www.google.com/search?q=（输入关键词就会直接跳对应的搜索结果）
• 如果不想在新标签页打开链接，把 window.open 里的 _blank 改成 _self 就行

方案2：根据不同输入匹配不同固定链接（多条件） #

如果你的需求是输入特定内容跳特定链接（比如输入"知乎"跳知乎首页，输入"GitHub"跳GitHub），可以用这个方案：

<!DOCTYPE html>
<html>
<head>
    <title>自定义跳转工具</title>
</head>
<body>
    <input type="text" id="inputText" placeholder="输入关键词（比如知乎/GitHub）">
    <button onclick="handleSubmit()">提交</button>

    <script>
        function handleSubmit() {
            // 获取输入内容并转成小写，这样用户输入大写小写都能匹配
            const inputValue = document.getElementById('inputText').value.trim().toLowerCase();
            
            if (!inputValue) {
                alert('请输入内容哦！');
                return;
            }

            // 定义关键词和对应链接的映射表，你可以无限加新的键值对
            const linkMap = {
                '知乎': 'https://www.zhihu.com/',
                'github': 'https://github.com/',
                '百度': 'https://www.baidu.com/'
                // 示例：再加一个B站的跳转 → 'b站': 'https://www.bilibili.com/'
            };

            // 检查输入的关键词有没有对应的链接
            if (linkMap[inputValue]) {
                window.open(linkMap[inputValue], '_blank');
            } else {
                alert('没有找到对应的链接哦！');
            }
        }
    </script>
</body>
</html>

自定义修改点 #

• 在 linkMap 里继续添加键值对就行，格式就是 '关键词': '对应链接'
• 如果想严格区分大小写（比如只有输入"GitHub"才跳转，输入"github"不行），把代码里的 .toLowerCase() 删掉就可以了

使用方法 #

把上面的代码复制到记事本（或者其他文本编辑器），保存成 text.html，双击打开就能用啦！这是本地HTML文件，完全不需要服务器，刚好符合你个人使用的需求～

如果还有不懂的地方，随时问我！

内容的提问来源于stack exchange，提问作者Alice314