如何将字符串中的<br/>识别为HTML换行标签并渲染？

问题根源 #

你当前的代码错误地将元素的innerHTML直接替换成了<br/>，而非把包含<br/>的greeting内容赋值进去；另外如果使用了前端模板引擎（如Vue、Handlebars），默认会自动转义HTML标签，导致<br/>被当作普通文本输出。

解决方案 #

1. 原生JavaScript场景 #

如果是纯原生JS渲染，不要用模板语法直接输出，而是通过JS获取greeting变量后，将其赋值给元素的innerHTML：

<i id="break" class="textTitle"></i>
<script>
  // 假设greeting是从数据库获取的目标字符串
  const greeting = "hello, <br /> have a good day,";
  document.getElementById("break").innerHTML = greeting;
</script>

这样元素会直接解析greeting里的<br/>标签，实现换行效果。

2. Vue框架场景 #

Vue默认的双大括号{{ }}会转义HTML，需使用v-html指令跳过转义：

<i class="textTitle" v-html="greeting"></i>

3. Handlebars模板引擎场景 #

使用三重大括号{{{ }}}禁用HTML转义：

<i id="break" class="textTitle">{{{ greeting }}}</i>

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