标签：let blog exp log tin jquer app span 后台
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
react和angualr动态插入带html标签或不带html标签的数据
标签：let blog exp log tin jquer app span 后台
原文地址：http://www.cnblogs.com/fengnovo/p/6030527.html
