JS实现输入文本替换Base64模板字符串并生成URL跳转的问题求助

嘿，我来帮你搞定这个问题！先梳理下你当前代码的问题，再给出符合需求的完整实现：

问题分析 #

你现在的代码有几个点可能导致编码结果始终一致：

1. document.write的坑：它会直接覆盖整个页面，导致你每次提交后看不到输入框，后续测试只能刷新页面，很容易出现输入值没被正确获取的情况。
2. JSON拼接的风险：直接用字符串拼接构造JSON，如果输入文本带引号、特殊字符，会破坏JSON结构，导致编码异常。
3. 没按需求处理Base64模板：你最初的需求是解码Base64模板后替换两处内容，但当前代码是直接写死JSON，没有走“解码模板→替换→重新编码”的流程。

修复后的完整代码 #

下面是完全符合你需求的代码，每一步都做了注释：

<html>
<script type="text/javascript">
function goToPage() {
    // 1. 获取输入的文本，先做空值校验
    const searchQuery = document.getElementById('text').value.trim();
    if (!searchQuery) {
        alert('请输入要替换的内容哦');
        return;
    }

    // 2. 这里替换成你实际的Base64编码的JSON模板
    // 示例模板是你需求里的JSON编码后的结果
    const base64Template = "eyJjb21wb25lbnREZWYiOiJmb3JjZVNlYXJjaDpzZWFyY2giLCJhdHRyaWJ1dGVzIjp7InRlcm0iOiJTQVJDSFNUUklORyBTVFJJTkcgMiIsInNjb3BlTWFwIjp7InR5cGUiOiJUT1BfUkVTVUxUUyJ9LCJjb250ZXh0Ijp7ImRpc2FibGVTcGVsbENvcnJlY3Rpb24iOmZhbHNlLCJTQVJDSF9BQ1RJVElUeSI6eyJ0ZXJtIjoiU0FSQ0hTVFJJTkcgU1RSSU5HIDIifX19";
    
    // 3. 解码Base64模板为普通JSON字符串
    const decodedTemplate = atob(base64Template);
    
    // 4. 一次性替换所有"SEARCH STRING 2"（确保两处都被替换）
    const updatedJsonStr = decodedTemplate.replace(/SEARCH STRING 2/g, searchQuery);
    
    // 5. 重新编码为Base64，兼容中文/非ASCII字符
    const encodedString = btoa(unescape(encodeURIComponent(updatedJsonStr)));
    
    // 6. 拼接URL并打开，用新窗口避免覆盖当前页面
    const targetUrl = "http://www.mywebsite.com/print/" + encodedString;
    window.open(targetUrl, '_blank');
}
</script>
<input type="text" id="text" placeholder="输入要替换的内容" />
<input type="submit" value="提交" onclick="goToPage();" />
</html>

关键细节说明 #

• 模板处理：把你原始的JSON模板（就是包含两处"SEARCH STRING 2"的那个）编码成Base64，替换代码里的base64Template值就行。
• 全量替换：用正则/SEARCH STRING 2/g可以一次性替换所有匹配的内容，不用写两次替换逻辑。
• 兼容非ASCII字符：如果输入中文或特殊字符，直接用btoa会报错，所以先转码再编码，保证兼容性。
• 避免页面覆盖：用window.open打开新页面，或者用window.location.href = targetUrl在当前页打开，不会像document.write那样毁掉页面。

为什么之前编码结果一致？ #

大概率是document.write导致页面被覆盖，你看到的可能是第一次编码的缓存结果；或者输入为空时，替换后的JSON和原模板完全一致，编码自然没变化。现在加了空值判断，就能避免这种情况啦。

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