EJS+Node.js项目问题：多词搜索后搜索框仅保留首个单词

嘿，这个坑我之前踩过！你遇到的问题核心在于HTML属性值的引号缺失，导致浏览器解析时把空格后的内容当成了新属性，直接截断了你的搜索词。下面给你一步步拆解解决方案：

问题根源 #

当用户搜索“Hello World”时，GET请求的URL会变成?query=Hello+World，后端其实能拿到完整的“Hello World”字符串，但如果你的EJS模板里搜索框的value属性没加引号，比如写成：

<input type="text" name="query" value=<%= query %>>

浏览器会把它解析成：

<input type="text" name="query" value="Hello" World>

后面的World被当成了无效的HTML属性，所以搜索框里只显示“Hello”。

两步解决法 #

1. 后端确保获取完整查询参数 #

用Express的话，直接通过req.query就能拿到完整的搜索词（Express会自动把URL里的+转成空格），比如：

app.get('/search', (req, res) => {
  // 拿到完整的搜索词，为空时给默认值避免报错
  const searchQuery = req.query.query || '';
  // 这里写你的搜索逻辑，比如查询数据库
  const results = /* 你的搜索结果 */;
  // 把搜索词传给结果页模板
  res.render('results', { query: searchQuery, results });
});

2. EJS模板给value属性加引号 #

这是最关键的一步！把搜索框的value值用双引号包裹起来，确保完整字符串被识别为属性值：

<!-- 结果页的搜索框代码 -->
<form action="/search" method="GET">
  <input 
    type="text" 
    name="query" 
    placeholder="输入搜索词..."
    value="<%= query %>" <!-- 这里必须加双引号！ -->
  >
  <button type="submit">搜索</button>
</form>

这样修改后，浏览器会正确解析成：

<input type="text" name="query" value="Hello World">

搜索框就能完整显示“Hello World”啦～

额外提示 #

如果你的搜索词可能包含引号（比如用户搜索"Hello"），可以用EJS的<%- %>配合转义函数，避免HTML注入：

value="<%- encodeURIComponent(query).replace(/"/g, '&quot;') %>"

不过如果只是普通的空格场景，直接加双引号就足够解决问题了。

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