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

时间: 2024-10-07 11:47:29

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

JavaScript 动态插入 CSS

写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 1 创建一个 style 对象2 使用 stylesheet 的 insertRule 或 addRule 方法添加样式 一.查看样式表 先看下 document.styleSheets,随意打开一个页面 其中前三个是通过 link 标签引入的 CSS 文件,第四个是通过 style 标签内联在页面里的 CSS.有如下属性 每一个 cssRule 又有如下属性 其中的

#转#VS2012 正则表达式 动态插入 动态替换 (查找和替换工具)

http://www.chinabaike.com/t/9642/2014/0623/2539877.html 在用VS做编码开发时,我们常会用到其自带的"查找和替换"这个工具. 关于用正则替换,有一些容易被遗忘的非常有用的功能.比如,正则动态插入并替换. 通常,如果我们要查找源文件中的固定字符"A",并替换成固定字符"B",那么简单,只需分别在查找框输入"A"和替换框输入"B",然后点查找.替换按钮就可以

jquery动态插入行,不用拼写html,简洁版

这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"> <table id="tblData"> <tr> <td>保证人姓名</td> <td>证件号码</td> <td>工作单位</td> <td>职务</td> &

jquery动态插入行

这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style="padding:20px;" > <div id="optionContainer" class="ftitle">经验实体信息(必填,多个网商店铺需加行)</div> <div id="option0"

利用iStylePDF的API实现在PDF文档中动态插入一幅图片

PDF的交互特性里面有一种叫Annotation的注释和标记对象,我们可以在一个注释对象中放入自己想要的数据.在这篇文章中所讲到的插入一幅图片,是我们在PDF应用中经常需要这样做的,比如个人签名的图片等. 首先我们来认识下PDF里面中的Annotations是何东东.一个annotation关联了一些注释.声音.电影等对象,PDF标准中预定义了一些常用的注释类型.在我们的帮助文档中有详细的说明,等下也会用到的,我列举出来了,如下所示 名称 数值 描述 spAnnotText 0 文本 spAnn

Sql [hierarchyid]类型如何动态插入层级数据

[hierarchyid] 是个不错的数据类型,提供了很方便并且高性能的树型查询,网上找了很多资料都没有讲到如何做到动态插入这个关键点,从MSDN认真看了下资料写出了一个DEMO CREATE TABLE EmployeeOrg ( OrgNode hierarchyid PRIMARY KEY CLUSTERED, OrgLevel AS OrgNode.GetLevel(), EmployeeID int UNIQUE NOT NULL, EmpName varchar(20) NOT NU

vc 在edit控件中动态插入数据滚动显示

内存从网上论坛摘抄整理 思路:给控件设置多行属性,设置垂直滚动条,Auto Vscroll设置为true,放入文本后把插入点设置到末尾 pEdit->LineScroll(pEdit->GetLineCount()); 滚动条滚动到最下端 int len  = pEdit->GetWindowTextLength(); pEdit->SetSel(len,-1,true); //定位光标到内容末尾pEdit->ReplaceSel("12121212");

js动态插入的元素点击无效

当点击按钮1时为元素b动态添加类discounted,并对具有类discounted的元素b进行点击事件 $(".btn1").click(function(){ $(".b").addClass("discounted"); }); $(".b.discounted").on("click",function(){ alert("1111"); }) 以前以为动态插入的元素直接用on便

FMDB处理动态插入语句

昨天做一个需求,参数的数量不确定,所以无法使用这个API: - (BOOL)executeUpdate:(NSString*)sql, ... 但是用 - (BOOL)executeUpdate:(NSString*)sql withParameterDictionary:(NSDictionary *)arguments 可以很方便地处理这个场景,本文总结一下 两类insert语句 因为不管使用哪种API,都需要先拼接sql语句,所以先了解一下sql insert语句的写法.有2种,比较常见的