Angular框架开发前端之字符串换行 & HTML 换行的互换

IOS UINavigationController 的使用

• 前言
• • 如何实现字符串与 HTML 的平滑切换
  • 效果图
• 结语

前言

在使用 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 框架的解决方案，所以在此记录一下，希望能够帮助您更快地解决遇到的问题。

---

仅供参考，敬请指正。