AngularJs如何从API返回的HTML格式响应中提取目标邮件正文展示

1. 提取目标正文内容 #

你可以根据业务场景选择以下两种提取方案：

• 方案1：字符串匹配（适合邮件头部结构固定的场景）

// 假设接口返回的完整数据存在response变量中
const rawHtml = response.body;
const startFlag = 'Hi Jhon';
const startPosition = rawHtml.indexOf(startFlag);
let targetContent = '';
if (startPosition !== -1) {
  // 从Hi Jhon的位置截取到字符串末尾，就是所需的正文内容
  targetContent = rawHtml.slice(startPosition);
}

• 方案2：DOM解析提取（稳定性更高，不受头部结构变动影响）

const rawHtml = response.body;
// 创建临时DOM容器解析原始HTML
const tempDom = document.createElement('div');
tempDom.innerHTML = rawHtml;
const allChildNodes = tempDom.childNodes;
let startCollect = false;
const targetContainer = document.createElement('div');
// 遍历所有节点，找到包含Hi Jhon的节点后开始收集内容
allChildNodes.forEach(node => {
  if (node.textContent?.includes('Hi Jhon')) {
    startCollect = true;
  }
  if (startCollect) {
    targetContainer.appendChild(node.cloneNode(true));
  }
});
const targetContent = targetContainer.innerHTML;

2. 在AngularJS中渲染HTML内容 #

AngularJS默认会转义HTML内容防止XSS攻击，要正常渲染需要借助ngSanitize模块：

1. 先在项目中引入angular-sanitize依赖，在模块注册时注入

// 模块注册时注入ngSanitize
angular.module('yourApp', ['ngSanitize'])
.controller('mailController', ['$scope', function($scope) {
  // 将提取到的正文内容挂到作用域上
  $scope.mailBody = targetContent;
}]);

2. 模板中使用ng-bind-html指令渲染

<div class="mail-content" ng-bind-html="mailBody"></div>

注意事项 #

• 如果邮件来源不可信，建议额外过滤恶意标签（如<script>、<iframe>等），降低XSS安全风险
• 如果邮件开头人名不是固定值，可以调整匹配规则，比如定位到头部的<hr>标签之后开始收集内容，适配业务场景

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