react和angualr動態插入帶html標簽或不帶html標簽的數據

        let content = '';//content是后台返回的未知的一長串字符串，可能是'<p>內容<div>一個div</div></p>',也可能是'內容\r\n任何格式'
        let reg = new RegExp('^<([^>\s]+)[^>]*>(.*?<\/\\1>)?$');
        let format = reg.test(content); //content有可能是有格式的（帶html標簽），也可能無格式
        if(!format){
            content = content && content.split('\n').map((item,i)=><p key={i}>{item.replace(/(^\s*)|(\s*$)/g, "")}</p>);
        }else{
            content = content && content.replace(/\n/g, "<br />");
            //帶格式的可能含有換行的/n，要轉化為<br />
        }

        let contentHtml1 = <article id='contentHtml' className='content' dangerouslySetInnerHTML={{__html: content}}></article>;
        let contentHtml2 = <article id='contentHtml' className='content no-fomat'>{content}</article>;
        let contentHtml = format ? contentHtml1 : contentHtml2;

        return (
            <div className="detail" ref='detail'>
                {contentHtml}
            </div>
        );    

react是用dangerouslySetInnerHTML添加帶html標簽的字符串，dangerouslySetInnerHTML={{__html: content}}  類似 jquery的$('#id').html(content);

而react的{content}是類似 jquery的$('#id').text(content);直接插入content的內容不渲染里面的標簽元素。


類似的angular也有這種方法

         


<div id="content" ng-bind-html="trustHtml"></div>


app.controller('detailCtrl', ['$scope','$rootScope','$routeParams','$http','$sce', function ($scope,$rootScope,$routeParams,$http,$sce) {
        

        $http.get('/api/v1/topic/'+$routeParams.id).success(function(data){
			$scope.data = data.data;
			$scope.trustHtml = $sce.trustAsHtml(data.data && data.data.content);
			//$('#content').html(data.data && data.data.content);
        });



    }]);

　在angular用$sce 對象，將html中定義的屬性ng-bind-html="xx"，的，在controller里面用$scope.xx = $sce.trustAsHtml('<div><p>test</p><div>test2</div></div>');相當於$('#content').html();

而對於不含html標簽的數據，直接定義{{xx}}，通過$scope.xx = '';

代碼github地址：https://github.com/fengnovo/diary/tree/master/others/angular/20161029/ng-app