使用express-validator转义后前端无法渲染原符号的问题求助

问题根源 #

你用express-validator的escape()把输入的/转成了HTML实体/，而React JSX默认会对字符串做转义处理——也就是说，当你渲染2/1时，JSX会把&再转成&，最终页面直接显示转义后的实体串，而非解析成2/1。

方案一：后端取消不必要的转义（推荐） #

你的matches规则已经限定了允许的字符范围：[A-Za-z\d ._\-)(\\/]*，其中包含了/，这些字符本身都是安全的，不需要用escape()转义。直接去掉escape()步骤，存入数据库的就是原始的2/1，前端渲染时自然显示正确。

调整后的验证代码：

body("abbreviation")
  .notEmpty()
  .isLength({ min: 2, max: 11 })
  .trim()
  // 移除escape()
  .matches(/[A-Za-z\d ._\-)(\\/]*/)

方案二：前端解析HTML实体（仅适用于已存储实体的情况） #

如果数据库里已经存了2/1这类实体，不想修改后端的话，可以用React的dangerouslySetInnerHTML强制解析HTML实体。注意：只有当你能100%确定内容安全（比如经过严格后端验证，无恶意代码）时再用，避免XSS攻击风险。

修改前端渲染代码：

<h2 dangerouslySetInnerHTML={{ __html: classAbbreviation }}></h2>

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