angular.js中html代码过滤，以及html中文本显示

本文介绍在前端开发中处理富文本的两种常见方法：一是利用angular-sanitize模块和ng-bind-html指令安全地展示HTML内容；二是提供JavaScript函数去除HTML标签，仅保留纯文本。这些技巧对于前端开发者处理和显示动态生成的富文本内容非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用各种富文本剪辑器时，内容基本会以html代码的形式保留到后台。那么前端在处理的时候就会遇到两种问题：

1、保留html中的各种设置。这个时候就推荐使用ng-bind-html （PS:如果你是用的angular.js进行基础构架的话）

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 "angular-sanitize.js" 模块，使用 ngSanitize 函数来检测代码的安全性。angular-sanitize一般会附带在angularjs中，如果没有附带，请前往官网下载对应版本的angular-sanitize模块。

模块代码

var app = angular.module('demo',['ng-sanitize']);

控制器代码

app.filter("showAsHtml",function($sce){
 return funciton(input){
  retrun $sce.trustAsHtml(input);
 }
})

在引用的时候

<div ng-bind-html='bbb|showAsHtml'></div>

2、删除HTML文件，只保留文本

在代码中：

        $scope.removeHTMLTag = function(str){
            str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
            str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
            //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
            str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
            str=str.replace(/\s/g,''); //将空格去掉
            return str;
        }

在前端使用：