angularjs解析带换行\n的字符串

最新推荐文章于 2024-07-11 15:59:35 发布
最新推荐文章于 2024-07-11 15:59:35 发布
阅读量8.8k 收藏 1
点赞数 1
分类专栏： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/72954998
版权
在AngularJS中， 字符在HTML页面上不会导致换行。为了解决这个问题，可以尝试两种方法：一是使用ng-bind-html，但需要注意AngularJS的XSS防护，需要通过$sce.trustAsHtml声明内容可信；二是直接处理文本，避免AngularJS将 转换为空格。
摘要由CSDN通过智能技术生成

问题

我需要将数据库中存储的字符串在html页面上显示，结果发现字符串中的\n在页面是没有作用，也就是没有换行。

解决

方法一：

百度了，大家都说用ng-bind-html，这个对有的字符串可以解析，但是一般会报错。

[$sce:unsafe] Attempting to use an unsafe value in a safe context.

      这是因为Angularjs为了系统安全着想，在Web安全中XSS（Cross-site scripting，脚本注入攻击），它是在Web应用程序中很典型的计算机安全漏洞。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行，来达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可能会

最低0.47元/天 解锁文章
yingzizizizizizzz
关注
专栏目录
angularJS过滤器 <div > <p>{{name}}</p><!--识别空格和换行--> </div>
outsiderlcy的博客
11-03 6544
angularJS       首先我们要对angularJS有一定简单的了解的过滤器 angularJS过滤器（大标题小标题）         |:管道符号，用来分割数据和过滤器 currency:货币金额的操作       代码示例：（此次展现了所有代码，下次将只展现核心代码） 过滤器 var m=angular.module('myApp',[]);
AngularJs输出字符串换行\n或<br/>不管用时，要用ng-bind-html配合解决
编程日常记录与总结 https://franciswmf.iteye.com
03-24 1163
1、controller [code="java"]/*显示条件表达式*/ var myConExpController=['$scope', '$http','myCache', function($scope, $http,myCache) { //显示当前条件表达式 $scope.$on('showConExpEvent',function(event,data){ va...
AngularJS快速入门
最新发布
LG_971124的博客
07-11 974
记录angularJS1.0学习笔记
AngularJs输出字符串换行\n或<br/>不管用时，要用ng-bind-html配合解决
热门推荐
编程日常记录与总结 https://franciswmf.iteye.com
04-12 1万+
1、controller /*显示条件表达式*/ var myConExpController=['$scope', '$http','myCache', function($scope, $http,myCache) { //显示当前条件表达式 $scope.$on('showConExpEvent',function(event,data){ var len=data.len
angularjs中类似textarea的换行、空格处理
diweng4066的博客
05-24 793
背景 今天测试人员测试出来一个显示数据的页面，没有换行。 原因剖析 这个页面是从一个<textarea>的页面拿到的数据，存到数据库中后再返回来的。 1. 知道这点之后，就有了调查方向了：先查看从数据库取出来的数据是否有换行的标识，经过调试发现确实有（chrome换行符显示的是一个回车键的图标） 2. 既然有换行符，那么就是存取数据都是原模原样的，那么在显示的时...
【AngularJs】 <br>换行显示成字符串
weixin_30618985的博客
04-24 493
<br>无效 <p><span>{{item.content}}</span></p> 使用ng-bind-html <p><span ng-bind-html="item.content"></span></p> 转载于:https://...
angularjs手动识别字符串中的换行符
蚂蚁先锋队的博客
02-10 4719
情景一 html：  style="text-align: left;color: yellow;" disabled="true">{{value}} controller: $scope.value="1.javaScript \n 2.html5 \n 3.C++"; 显示： 1.javaScript 2.html5 3.C++     情景二
angularjs手动识别字符串中的换行符方法
10-17
当这个字符串被赋值给`<textarea>`时，`\n`并未被解析为换行，而是原样显示： ```html ;color: yellow;" disabled="true">{{value}} ``` 在Controller中，`$scope.value`的值是： ```javascript $scope.value = ...
关于textarea中换行、回车、空格的识别与处理
qq_26486949的博客
08-02 5545
###需求： 在textarea中输入文字，提交给后台后，后台输出在另一个页面，文字按原格式显示。 ###兼容性： IE9以上、FF、chrome在换行处匹配/\n/ IE7-8在换行处先匹配/\r/，再匹配/\n/ ###问题解决： 1、把\n \r\n \s 分别替换为   这种情况是替换后的字符串能够被网页解析，这样在网页上就能看到换行...
eslint 换行_eslint 常用配置
weixin_42298412的博客
01-13 5025
前言在团队协作开发中，为了统一代码风格，避免一些低级错误，应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint工具来实现这样的功能，JavaScript也有类似的工具：ESLint。除了可以集成到构建工具中(如：Gulp)在构建过程中检查代码风格以外；还可以通过将ESLint和代码编辑器相结合以提供代码风格的实时校验。这里将介绍如何在Visual Studio Code使用ESLint来提...
有感 Visual Studio 2015 RTM 简介 - 八年后回归 Dot Net，终于迎来了 Mvc 时代，盼走了 Web 窗体时代
太阳火神的美丽人生
01-03 5468
有感 Visual Studio 2015 RTM 简介 - 八年后回归 Dot Net，终于迎来了 Mvc 时代，盼走了 Web 窗体时代
angular:后台字符串格式化成HTML格式显示到Web页面
Web魔法师
06-29 1065
后台传给前端的页面，含有换行符，空格等特殊字符，前端显示时，需要进行格式化处理，然后再在前端页面显示。 定义格式化函数： import {DomSanitizer} from "@angular/platform-browser"; constructor(private http: HttpWithTokenService, public msg: NzMessageService, private sanitizer: DomSanitizer ) { } safeHtmlFo
angularjs开发常见问题-2（angularjs内置过滤器）
akemt的专栏
07-19 1625
在angular中内置了几个常用的filter,可以简化我们的操作。过滤器使用 ‘|’ 符号，概念有点类似于linux中的管道。1、filter （过滤）filter可以根据条件过滤数据，例子：{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}结果：[{"name":"co
angularjs解决方案之 Error: [$sce:unsafe]
weixin_34050389的博客
10-31 756
angularjs中无法直接使用ng-bind-html： 1 <divng-bind-html="item.text|highlight:$select.search"></div> 1.app.js中添加 1 2 3 angular.module('epcui',[ ...
关闭Angularjs对HTML标签自动转义
clankair的博客
05-16 625
当Angular绑定的字符串中含有HTML标签的时候，其中碰到 AngularJS 获取的是一段 HTML 文本，如果直接使用 data-ng-bind 的话是被转义过的，使用 data-ng-bind-html 则可以取消转义。但是直接使用 data-ng-bind-html 的话会提示错误。 Error: [$sce:unsafe] Attempting to use an unsafe
angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理
weixin_30950607的博客
05-09 602
在angular中使用ng-data-html渲染dom时，遇到了一个Attempting to use an unsafe value in a safe context错误，官方给出的理由是‘试图在安全的上下文中使用不安全的值’。 导致此问题的实际原因是，返回数据中包含了html模板，angular会觉得在渲染数据中直接插入html不安全。 我们可以通过angular内置的$sce服务的t...
AngularJS 如何进行字符串换行 & HTML 换行的互换
weixin_43536737的博客
12-23 3276
IOS UINavigationController 的使用前言如何实现字符串与 HTML 的平滑切换效果图结语 前言 在使用 textarea 标签设计多行输入功能时，我需要实现：点击编辑进入修改模式（textarea），再次点击，保存修改，换成显示模式（p 标签）。 这时，问题出现了，textarea 中换行读入的是 ‘/n’，而 p 中换行使用的是 HTML 语法，也即 <br> 或 <br />，这就需要我们在 js 中根据要显示的格式，对 ‘/n’ 与 <br>
angular显示html片段,AngularJS中取消对HTML片段转义的方法例子
weixin_42641869的博客
07-05 99
这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下今天尝试用 Rails 做后端提供 JSON 格式的数据， AngularJS 做前端处理 JSON 数据，其中碰到 AngularJS 获取的是一段 HTML 文本，如果直接使用 data-ng-bind 的话是被转义过...
cpp如何读取带换行的字符串
06-09
在 C++ 中，可以使用 `cin` 对象读取带换行的字符串，但是这种方式只能读取一行字符串中的第一个单词。如果需要读取整行字符串，可以使用 `getline()` 函数。 例如，以下代码演示了如何使用 `cin` 读取一行带换行的字符串中的第一个单词： ```cpp #include <iostream> #include <string> using namespace std; int main() { string str; cout << "请输入一行带换行的字符串：" << endl; cin >> str; // 读取一行字符串中的第一个单词 cout << "您输入的字符串是：" << str << endl; return 0; } ``` 如果需要读取整行字符串，可以使用 `getline()` 函数，如下所示： ```cpp #include <iostream> #include <string> using namespace std; int main() { string str; cout << "请输入一行带换行的字符串：" << endl; getline(cin, str); // 从标准输入流中读取一行字符串 cout << "您输入的字符串是：" << str << endl; return 0; } ``` 在上面的程序中，我们使用 `getline()` 函数从标准输入流中读取一行带换行的字符串，并将其存储在 `str` 变量中。然后将其输出到屏幕上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值