JavaScript网站搜索栏跳转对应页面失败问题求助

1. 先清理输入中的引号 #

既然提示地址含引号，说明userData里大概率残留了单/双引号（哪怕你处理了空格），直接移除这些引号：

if(userData){
    icon.onclick = ()=>{
        // 移除所有单双引号
        const cleanUserData = userData.replace(/['"]/g, '');
        // 用模板字符串拼接路径更直观
        const webLink = `myPages/${cleanUserData}.html`;
        linkTag.setAttribute("href", webLink);
        linkTag.click();
    }
}

2. 处理特殊字符编码 #

搜索输入可能包含中文、&、%等特殊字符，这些会导致URL解析错误，需要编码处理：

if(userData){
    icon.onclick = ()=>{
        const cleanUserData = userData.replace(/['"]/g, '');
        // 对清理后的字符串进行URL编码
        const encodedUserData = encodeURIComponent(cleanUserData);
        const webLink = `myPages/${encodedUserData}.html`;
        linkTag.href = webLink; // 直接赋值href比setAttribute更简洁
        linkTag.click();
    }
}

注意：你的实际网页文件名要和编码后的字符串一致，比如用户输入“张三”，编码后是%E5%BC%A0%E4%B8%89，对应的文件名就得是%E5%BC%A0%E4%B8%89.html。

3. 调试确认生成的路径 #

在代码里加日志，直接看生成的路径到底是什么，方便定位问题：

if(userData){
    icon.onclick = ()=>{
        const cleanUserData = userData.replace(/['"]/g, '');
        const webLink = `myPages/${cleanUserData}.html`;
        console.log('实际生成路径：', webLink); // 打开浏览器控制台查看
        linkTag.href = webLink;
        linkTag.click();
    }
}

比如如果日志输出myPages/"test".html，就说明引号没清干净，继续调整正则规则。

4. 确保变量作用域正确 #

如果userData是异步获取的搜索输入，要确保回调里拿到的是最新值，建议在获取输入时就保存到局部变量：

// 先获取并处理搜索输入
const inputValue = document.getElementById('searchInput').value.trim();
const cleanInput = inputValue.replace(/['"]/g, '');

if(cleanInput){
    icon.onclick = ()=>{
        const webLink = `myPages/${cleanInput}.html`;
        linkTag.href = webLink;
        linkTag.click();
    }
}

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