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

转载于:https://www.cnblogs.com/fengnovo/p/6030527.html

react和angualr动态插入带html标签或不带html标签的数据相关推荐

JQuery之向标签动态插入html
本文介绍了向标签中动态插入html分为向标签内部.外部插入,此外还有替换标签内部原来的html内容. 快捷导航,点击快速查看 ①prepend();(标签内.文首插入) ②append(); (标签内 ...
动态引入js只能生效一次_干货丨动态插入的script脚本执行时间
在一些场景我们会动态插入script标签加载js. 譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深.且和你页面本身的结 ...
动态引入js只能生效一次_动态插入的script脚本执行时间
在一些场景我们会动态插入script标签加载js. 譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深.且和你页面本身的结 ...
c mysql 批量插入_c#之mysql四种带事务批量插入
前言对于像我这样的业务程序员开发一些表单内容是家常便饭的事情,说道表单我们都避免不了多行内容的提交,多行内容保存,自然要用到数据库,如果循环打扰我数据库,数据库也会觉得很累,从而增加数据库服务器压 ...
Python之tkinter：动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件)
Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件) 导读动态演示调用python库的tkinter带你进入GUI世界(Button ...
2.4.3 Mybatis 高级查询, 复杂映射, 返回主键, 动态SQL if, set, foreach, 核心配置文件深入,plugins标签, 多表查询, 嵌套查询
目录 Mybatis 复杂映射&配置文件深入一 Mybatis高级查询 1.1 ResutlMap属性 1.2 多条件查询(三种) 1.3 模糊查询二 Mybatis映射文件深入 2.1 ...
React 如何实现动态搜索(联想搜索)
React 如何实现动态搜索高亮前言一.大体流程二.使用步骤 1.封装用于样式变化的函数 2.使用函数总结前言任务需求实现类似网易云这样的搜索联想一.大体流程拿到用户拿到的Input ...
mybatis动态插入sql语句的编写
在使用mybatis进行插入数据操作时有时不需要给每个字段都添加值或者现在没办法给每个字段都添加值,那怎么办呢? 这时就得自定义mybatis的mapper配置文件,写一个动态sql语句.如下图 &l ...
如何给二维码动态插入图片
很多用户在制作二维码时,会在二维码中嵌入Logo图片,以突显一些标志性信息.如果是批量制作的二维码,需要给每个二维码嵌入不同的图片,这种情况该如何实现呢?下面,小编就给大家演示二维码动态插入图片的操作 ...

react和angualr动态插入带html标签或不带html标签的数据

react和angualr动态插入带html标签或不带html标签的数据相关推荐

最新文章

热门文章