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}
- EJS:将
内容的提问来源于stack exchange,提问作者Pedro Perez
相关产品推荐
相关产品推荐

