react在组件内插入标签_react和angualr动态插入带html标签或不带html标签的数据

let content = '';//content是后台返回的未知的一长串字符串，可能是'

内容

一个div

',也可能是'内容\r\n任何格式'

let reg = new RegExp('^\s]+)[^>]*>(.*?)?$');

let format= reg.test(content); //content有可能是有格式的(带html标签)，也可能无格式

if(!format){

content= content && content.split('\n').map((item,i)=>

{item.replace(/(^\s*)|(\s*$)/g, "")}

);

}else{

content= content && content.replace(/\n/g, "
");//带格式的可能含有换行的/n，要转化为

}

let contentHtml1= ;

let contentHtml2 = {content};

let contentHtml = format ?contentHtml1 : contentHtml2;return(

{contentHtml}

);

react是用dangerouslySetInnerHTML添加带html标签的字符串，dangerouslySetInnerHTML={{__html: content}}  类似 jquery的$('#id').html(content);

而react的{content}是类似 jquery的$('#id').text(content);直接插入content的内容不渲染里面的标签元素。

类似的angular也有这种方法

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('

test

test2

');相当于$('#content').html();

而对于不含html标签的数据，直接定义{{xx}}，通过$scope.xx = '';

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