You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Node.js中<br>未被识别为换行符,如何让字符串内HTML标签正常生效?

问题解决指南

首先修正你代码中的笔误:then回调的接收参数是v,但后续取值你用的是d,需要先统一参数名避免逻辑报错。

你遇到的<br>被当成纯文本展示的核心原因是:无论前端框架还是原生DOM操作、服务端模板渲染,默认都会对字符串内容做HTML转义处理,防范XSS跨站脚本攻击,所以标签不会被正常解析,你可以根据你的使用场景选择对应解决方法:

场景1:原生JavaScript操作DOM

  • 把赋值用的innerText属性替换为innerHTML即可:
// 错误写法,仅渲染纯文本
document.querySelector('#user-container').innerText = onlineusers
// 正确写法,会解析字符串中的HTML标签
document.querySelector('#user-container').innerHTML = onlineusers

注意:如果d.name是用户可自定义输入的内容,直接使用innerHTML会存在XSS注入风险,需要先对用户输入内容做XSS过滤再做拼接

场景2:Vue框架

  • 不要用默认的双大括号插值语法,改用v-html指令:
<!-- 错误写法,默认转义HTML -->
<div>{{ onlineusers }}</div>
<!-- 正确写法,解析HTML内容 -->
<div v-html="onlineusers"></div>

场景3:React框架

  • 使用dangerouslySetInnerHTML属性传递带HTML的字符串:
<div dangerouslySetInnerHTML={{__html: onlineusers}} />

场景4:服务端渲染模板(EJS/Pug等)

  • 改用模板的非转义输出语法:
    • EJS:将<%= onlineusers %>修改为<%- onlineusers %>
    • Pug:将#{onlineusers}修改为!{onlineusers}

内容的提问来源于stack exchange,提问作者Pedro Perez

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 04:27:03