多语言搜索栏跳转需求咨询：跨语言对应页面跳转及部署问题

问题背景 #

我现有一个带自动补全、语言切换功能的多语言站内搜索栏，代码已实现语言切换和关键词匹配补全。需要实现以下跳转逻辑：

• 用户搜索任意语言的「关于猫/狗」对应内容时，跳转至cats.html/dogs.html
• 无匹配内容时跳转至404.html

此前本地通过Node.js匹配编码后的URL路径（如/page%20about%20cats）实现跳转，但部署到线上服务器后该方案失效，咨询需求可行性及替代方案。

需求完全可行，推荐两种替代方案： #

方案一：前端直接处理跳转逻辑 #

无需依赖后端路由，在前端完成关键词与目标页面的映射判断，直接跳转：

1. 新增关键词-页面映射表，统一关联所有语言的对应关键词到目标页面：

// 所有语言的关键词与目标页面的映射
const keywordToPage = {
  'pagina over katten': 'cats.html',
  'page about cats': 'cats.html',
  'pagina sobre gatos': 'cats.html',
  'halaman tentang kucing': 'cats.html',
  'pagina over honden': 'dogs.html',
  'page about dogs': 'dogs.html',
  'pagina sobre perros': 'dogs.html',
  'halaman tentang anjing': 'dogs.html',
  // 可继续添加其他关键词映射
};

2. 修改表单提交与补全项点击的逻辑：

// 监听表单提交事件
document.getElementById('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交行为
  const inputValue = inputBox.value.trim();
  
  // 匹配目标页面
  const targetPage = keywordToPage[inputValue];
  if (targetPage) {
    // 跳转到对应页面（路径根据实际部署结构调整）
    window.location.href = `./public/pages/${targetPage}`;
  } else {
    // 无匹配内容跳转404
    window.location.href = './404.html';
  }
});

// 可选：点击补全项后直接跳转
function selectInput(list){
  const selectedText = list.innerHTML;
  inputBox.value = selectedText;
  resultsBox.innerHTML = '';
  
  // 直接跳转至对应页面
  if (keywordToPage[selectedText]) {
    window.location.href = `./public/pages/${keywordToPage[selectedText]}`;
  }
}

方案二：后端通过查询参数处理跳转 #

放弃匹配编码后的URL路径，改用查询参数传递搜索内容，后端根据参数判断跳转：

1. 调整前端表单，提交时传递查询参数：

<div class="searchbar">
  <form id="form" role="search" action="/search" method="get">
    <input type="text" id="query" name="q" placeholder="Search Here..." aria-label="Search through site content" autocomplete="off">
    <button>
      <span class="icon">
         <ion-icon name="search-outline"></ion-icon>
      </span>
    </button>
  </form>
  <div class="result-box"></div>
</div>

2. 后端路由处理查询参数：

const path = require('path');

// 关键词-页面映射表
const keywordToPage = {
  'pagina over katten': 'cats.html',
  'page about cats': 'cats.html',
  'pagina sobre gatos': 'cats.html',
  'halaman tentang kucing': 'cats.html',
  'pagina over honden': 'dogs.html',
  'page about dogs': 'dogs.html',
  'pagina sobre perros': 'dogs.html',
  'halaman tentang anjing': 'dogs.html',
};

app.get("/search", function (req, res) {
  const searchQuery = req.query.q;
  const targetPage = keywordToPage[searchQuery];
  
  if (targetPage) {
    res.sendFile(targetPage, { root: path.join(__dirname, './public/pages') });
  } else {
    res.sendFile("404.html", { root: path.join(__dirname, './public') });
  }
});

原方案线上失效原因 #

本地Node.js匹配/page%20about%20cats的路由，线上服务器可能存在URL解码规则差异（如Nginx等服务器会自动解码URL路径），导致实际请求路径变为/page about cats（带空格），而Node.js默认路由不匹配含空格的路径，因此方案失效。

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