angularjs中类似textarea的换行、空格处理
背景
今天测试人员测试出来一个显示数据的页面,没有换行。
原因剖析
这个页面是从一个<textarea>
的页面拿到的数据,存到数据库中后再返回来的。
1.
知道这点之后,就有了调查方向了:先查看从数据库取出来的数据是否有换行的标识,经过调试发现确实有(chrome换行符显示的是一个回车键的图标)
2.
既然有换行符,那么就是存取数据都是原模原样的,那么在显示的时候除了问题,那么是不是<span>
的问题,经过一番调查,span确实不能直接处理换行符,需要替换为<br />
,这个是html换行标记了
于是使用正则替换str.replace(/\n/g,"<br />")
,结果把要显示的内容的换行符替换为了<br />
,但是还是直接显示了出来,并没有达到换行的目的,这个时候自己都怀疑是不是<span>
不支持<br />
,于是用了<div>
替换了<span>
标记,一样的没有换行。
3.
这个时候,基本上猜测就是angularjs转义了,之后又查了资料,发现<pre>
标记可以使用,这个标记的描述是对原有内容原模原样的显示出来,也就是说<pre>
可以直接的显示<textarea>
的原始值,事实证明就是这样子的,但是它出现了一个黑灰色的背景框,这个可不是我想要的。
4.
既然是angularjs转义的,那么肯定有原始的解决方案,真让自己找到了,就是使用ng-bind-html
指令,可是这个页面直接提示这个是一个不安全的操作,都提供了这个指令了,还提示安全问题,那么肯定有对策,果然让自己找到了,必须配合$sce
服务使用
最终解决方案
使用
<pre>
直接显示值,就是有背景。<pre>{{data}}</pre>
在页面中使用ng-bind-html指令配合$sce
//js
app.filter('trustHtml',function($sce){
return function(input){
return $sce.trustAsHtml(input.replace(/ /g,' ').replace(/\n/g,'<br />'));
};
});
//html
<span ng-bind-html="data | trustHtml"><span>
回顾
自己出错的地方
<span>
标记不支持<br />
- 先处理的
<br />
的标记,之后才处理了空格
没有考虑的地方
- 空格的处理没有考虑到
- 先处理空格和转义字符的结果是不同的。
知识点
- angularjs把赋值都进行了转义
<testarea>
直接支持换行<pre>
标记也支持换行<textarea>
的换行符是\n
- angularjs使用
ng-bind-html
指令显示html的值 - html的直接支持是危险的,所以要使用
$sce.trustAsHtml
方法进行手动信任一次。 /\n/
只能替换第一个换行符,//g
是替换所有的(g
代表global)。- angularjs的filter是返回一个函数,且第一个参数是输入的值
扩展
- 注意转义的问题。
- 注意一些标签是支持换行、空格的。
$sce.trustAsHtml
处理html,因为看到了As,那么也就支持其他的AsXXX方法了,有哪些?- filter的4中用法:
{{data | filter1}}
,ng-bind-html="data | fitler1"
,fitler1(data)
,$filter('fitler1')(data)
- filter的多个参数的形式是一样的。
- linux 管道
|
符号的概念:把前面的结果当做后面的输入的参数
angularjs中类似textarea的换行、空格处理的更多相关文章
- 在使用easyui,datagrid时,JSON中的如果含有换行符,则不能显示数据
http://www.xuebuyuan.com/2103538.html 每项值需处理换行符 item = item.Replace("\r\n", ""); ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- 关于angularjs中的jQuery
关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 在Visual Studio中使用正则表达式匹配换行和批量替换
系统环境:Windows 8.1 Enterprise Update 2 x64 开发环境:Mircosoft Visual Studio Ultimate 2013 Update 2 RC 问题:如 ...
- AngularJS中实现无限级联动菜单(使用demo)
昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代 ...
- 关于input/textarea提交内容空格回车转换问题,以及ng-model去除空格问题
input/textarea提交内容空格回车转换问题 /*my-enter-bind.js*/ /*回车换行显示转义*/ 'use strict'; angular.module('app') .di ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
随机推荐
- SpringBoot Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean.
SpringBoot Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFact ...
- Sublime 安装、插件CoolFormat
http://www.sublimetext.com/3 安装Package Control https://packagecontrol.io/installation#st3 安装插件Cool F ...
- 设置某个类使用或者禁用ARC
设置这个类为ARC的 用:-fobjc-arc 设置这个类非ARC的:-fno-objc-arc 工程是非ARC的,但是引用的第三方类库是ARC的,所以要使用的时候,要单独设置这个第三方的类是A ...
- 更改sql多条数据,更新替换字符串中固定的字符串
需求产生的背景: 数据库里建库时插入了字典数据,可是这个字典数据,有一些是不准确的,所以就需要把一些固定的数据查出来替换掉. 问题解决逻辑: 大体逻辑是,首先把固定需要替换的字符串提取出来,赋值给变量 ...
- python3 第十五章 - 数据类型之Sets(集合)
python的官网里对集合的描述是: Python also includes a data type for sets. A set is an unordered collection with ...
- python3 第八章 - 完善九九乘法表
前面我们在第四章的时候挖了个坑:怎么用优雅的方式来打印九九乘法表.这一章我们就来填上这个坑. 首先,我们再来看下九九乘法表是什么样子的 1 x 1 = 1 1 x 2 = 2 2 x 2 = 4 1 ...
- 移动端 iphone锁屏文字效果
简易的仿照iphone 效果 笔记备份 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten ...
- BSA Network Shell系列-nexec命令
# nexec ## 1 说明:nexec是远程命令接口引擎 ,用于在远程主机执行命令 nexec [-?] [-t term] [-o] [-i] [-l] [-nohup hostname &qu ...
- 获取用户IP地址的三个属性的区别 (HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
一.没有使用代理服务 器的情况: REMOTE_ADDR = 您的 IPHTTP_VIA = 没数值或不显示HTTP_X_FORWARDED_FOR = 没数值或不显示 二.使用透明代理服务器的情 况 ...
- WMS—启动过程
基于Android 6.0源码, 分析WMS的启动过程. 一. 概述 Surface:代表画布 WMS: 添加window的过程主要功能是添加Surface,管理所有的Surface布局,以及Z轴排序 ...