标签：textarea 换行 标签 content HTML 字符串 Angular
IOS UINavigationController 的使用
前言
在使用 textarea 标签设计多行输入功能时，我需要实现：点击编辑进入修改模式（textarea），再次点击，保存修改，换成显示模式（p 标签）。
这时，问题出现了，textarea 中换行读入的是 ‘/n’，而 p 中换行使用的是 HTML 语法，也即 <br> 或 <br />，这就需要我们在 js 中根据要显示的格式，对 ‘/n’ 与 <br> 进行替换。
如何实现字符串与 HTML 的平滑切换
- 首先，在 html 文件中，将 p 标签的内容替换为 innerHtml，因为直接用 {{ }} 添加在标签中间，连
<br>都无法被识别，也就完全无法完成换行功能了。
<textarea *ngIf="editable" rows="10" class="blog-detail-content"
[(ngModel)]="contentInput" fxFlew="80%" fxLayoutGap="16px grid">
</textarea>
<p *ngIf="!editable" class="blog-detail-content" fxFlew="80%"
fxLayoutGap="16px grid" [innerHTML]="selectedBlog.content" ></p>
注意到：我的 textarea 标签的输入内容是使用 {{ }} 来绑定的，因为这里它只需要能够识别 ‘\n’ 即可，而 p 标签在内部使用 [innerHTML] 来绑定数据源，这样才能让浏览器识别其中的 <br>
- 然后编写 js，进行 字符串 和 HTML 的互换
if(this.editable){
var content_html = this.contentInput.replace(/\n/g,'<br>');
this.selectedBlog.content = content_html;
this.editable = false;
} else {
var reg = new RegExp('<br>','g');
var content_text = this.selectedBlog.content.replace(reg, '\n');
this.contentInput = content_text;
this.editable = true;
}
可以看到：字符串 与 HTML 都使用了 replace 函数，replace(/\n/g,'<br>') 中，/\n/g 的含义是 RegExp('\n', 'g')，同样是使用正则表达式来对字符串中所有 ‘\n’ 进行替换。
然后 HTML 转字符串，我是采用先创建正则表达式，再进行替换的方式，来进行全局替换。
效果图
（p 标签，HTML）
（textarea 标签，字符串）
结语
在实现 字符串 与 HTML 显示互换这样看似基础的功能时，我发现了自己的很多欠缺，比如：innerHtml 和 正则表达式。
网络上有各种 js 的解决方案，但没有找到 Angular 框架的解决方案，所以在此记录一下，希望能够帮助您更快地解决遇到的问题。
仅供参考，敬请指正。
标签：textarea,换行,标签,content,HTML,字符串,Angular 来源： https://blog.csdn.net/weixin_43536737/article/details/111571224
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。