AngularJS开发即时通讯应用如何将消息中HTML内容作为纯文本展示

问题原因 #

你直接将原始消息内容拼接至innerHTML字符串中，浏览器会把内容里的HTML标签解析为真实DOM节点，因此输入的HTML代码会被执行渲染，而非原样展示。

解决方案 #

方案1：手动转义HTML内容（适配你现有代码逻辑）

首先实现一个通用的HTML特殊字符转义函数：

function escapeHtml(rawContent) {
  const tempDiv = document.createElement('div');
  tempDiv.textContent = rawContent;
  return tempDiv.innerHTML;
}

该函数利用浏览器原生API自动转义所有特殊字符，无需手动枚举替换规则，兼容性好。

之后修改你的dataToHtml函数，插入消息内容前先调用转义函数处理：

function dataToHtml(which){
  // 校验是否为消息类型数据
  if(messagesData[which][0]=='message'){
    // 提前转义消息内容
    const safeContent = escapeHtml(messagesData[which][2]);
    // 判断消息发送方
    if(messagesData[which][1]=='mine'){
      chatContainer.innerHTML+=
      `
      <div class="chat-message-box">
          <div class="mine-message chat-message">${safeContent}</div>
      </div>
      `
    }else if(messagesData[which][1]=='other'){
      chatContainer.innerHTML+=
      `
      <div class="chat-message-box">
          <div class="other-message chat-message main-bg">${safeContent}</div>
      </div>
      `
    }
  }
}

方案2：使用AngularJS原生能力（更符合框架最佳实践）

AngularJS默认会对模板插值{{}}的内容做HTML转义，你可以改用框架能力渲染消息列表：

1. 将messagesData数组绑定到控制器作用域上
2. 在模板中用ng-repeat遍历消息列表，直接插值输出内容即可：

<div class="chat-message-box" ng-repeat="msg in messagesData" ng-if="msg[0] == 'message'">
  <div class="chat-message" ng-class="msg[1] == 'mine' ? 'mine-message' : 'other-message main-bg'">
    {{msg[2]}}
  </div>
</div>

该方案无需手动操作DOM，也无需额外写转义逻辑，框架自动处理安全转义。

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