前端接收后端传来的富文本内容,并换行,格式化显示在页面中

根据逻辑和需求选择适合自己的方法

1.可以考虑使用pre标签

2.可以使用正则表达式,例如我想在有。和!的地方进行换行,例如:

<script type="text/javascript">
    var description = '<p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">1.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">国际保险经纪行业收入分析<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">2010</span><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">年全球保险经纪行业市场规模为<span lang="EN-US">437.56</span>亿美元,<span lang="EN-US">2015</span>年增长至<span lang="EN-US">581.3</span>亿美元。<span lang="EN-US"><o:p></o:p></span></span></p> <p align="center" style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt; margin-left:0cm;text-align:center;mso-pagination:widow-orphan"> <span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">2010-2015</span><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">年国际保险经纪行业市场规模:亿美元</span></p> <p style="margin: 19.5pt 0cm; text-indent: 24.1pt; text-align: center;"> <img alt="" src="/baoxian/userfiles/1/images/back/news/2018/01/11.png" style="width: 493px; height: 296px;" /></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">2.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">国际保险经纪行业并购分析<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">保险经纪公司并购较为频繁,<span lang="EN-US">2011</span>年并购数量为<span lang="EN-US">351</span>件,且呈现增长趋势。一股保险行业的并购风潮正席卷全球各个市场。如意大利投资集团<span lang="EN-US">Exor</span>收购再保险公司<span lang="EN-US">PartnerRe</span>、韬睿惠悦与韦莱集团、韦莱与法国保险经纪公司<span lang="EN-US">GrasSavoye</span>、瑞士保险集团<span lang="EN-US">ACE</span>并购<span lang="EN-US">Chubb</span>以及美国保险公司<span lang="EN-US">Anthem</span>收购<span lang="EN-US">Cigna</span>。而这些不过是近年来保险业并购案清单的一小部分。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">然而,在热闹喧嚣的并购消息背后却是严酷的现实。波士顿咨询(<span lang="EN-US">BCG</span>)对<span lang="EN-US">1990</span>~<span lang="EN-US">2014</span>年间<span lang="EN-US">778</span>件涉及保险业的并购案进行了分析,对并购后一年内的股东总回报进行了追踪,最终发现只有<span lang="EN-US">51%</span>的并购能实际创造价值,而<span lang="EN-US">49%</span>的并购案则摧毁了公司的价值。近半数并购案失败可归咎为三大原因:并购准备和执行、并购后整合以及并购时机。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">3.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">保险业持续大整合<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">未来<span lang="EN-US">5</span>年,多个宏观层面的因素将继续推动保险业进行整合。首先是监管继续收紧,尤其是对资本充足率的要求将继续提升,无论是独立保险商还是综合集团都将感到更大的资金压力。利率和投资回报将继续保持较低水平(至少在成熟市场),使传统的寿险业务盈利能力受到限制。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">此外,新兴竞争对手的威胁也不可小觑,甚至大型连锁超市和电信公司都有可能颠覆保险行业的价值链。这些企业不但拥有价值连城的消费者数据,而且拥有与客户之间的“最后一公里”连接。在新的运营模式下,传统保险企业难以掌控整条价值链,且容易成为新型商业模式的颠覆目标,例如一些网络聚合搜索产品能够为消费者提供价格透明的产品对比。<span lang="EN-US"><o:p></o:p></span></span></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">资金充裕的大型保险公司可以利用投资抵御创新带来的威胁,而那些只聚焦于内部运营,对外部变化视而不见的中型企业将面临更激烈的竞争。对于保险公司来说,了解消费者的行为和需求是至关重要的能力,然而建设必需的大数据技术、文化和团队带来的成本巨大,让规模较小的保险公司难以承受。对于保险企业来说,有机成长的机会非常有限。成熟市场已经进入到整合周期内,尽管新兴市场存在着发展机遇,但市场环境非常复杂。要在新市场形成规模效应,并购显然仍是各大保险企业的明智之选。<span lang="EN-US"><o:p></o:p></span></span></p> <p align="center" style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt; margin-left:0cm;text-align:center;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">世界排名前十保险经纪公司国际业务占比<span lang="EN-US"><o:p></o:p></span></span></p> <p align="center" style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt; margin-left:0cm;text-align:center;mso-pagination:widow-orphan"> <img alt="" src="/baoxian/userfiles/1/images/back/news/2018/01/12.png" style="width: 554px; height: 289px;" /></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.1pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <b><span lang="EN-US" style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">4.</span></b><b><span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">国际保险经纪行业利润水平<span lang="EN-US"><o:p></o:p></span></span></b></p> <p style="margin-top:19.5pt;margin-right:0cm;margin-bottom:19.5pt;margin-left: 0cm;text-indent:24.0pt;mso-char-indent-count:2.0;mso-pagination:widow-orphan"> <span style="font-family:宋体;mso-bidi-font-family:宋体;color:#252525">目前,<span lang="EN-US">2015</span>年全球保险经纪行业收入达<span lang="EN-US">581.3</span>亿美元,国际保险经纪行业利润水平维持在<span lang="EN-US">10~25%</span>之间。<span lang="EN-US"><o:p></o:p></span></span></p>';
        description = description.replace(/(\n)/g, "");  
        description = description.replace(/(\t)/g, "");  
        description = description.replace(/(\r)/g, "");  
        description = description.replace(/<\/?[^>]*>/g, "");  
        description = description.replace(/\s*/g, "");
        console.log(description)
        
 
</script>
View Code
test.replace(/<[^>]+>|&[^>]+;/g, "")

3.使用textarea标签 例如<textarea v-model="item.content">{{item.content}}</textarea>

4.使用js插件,这个我未进行尝试,放上复制大神的代码

//进入页面直接加载,el表达

$(function() {

        viewContent();

    });

 

    function viewContent(){

        var $iframe =$('<iframe src="about:blank" frameborder=0 />');

        $iframe.ready(function()

                {

                    var doc = $iframe[0].contentDocument;

                    var id="_frame_t";

                    $iframe.attr('width', '100%');

                    $iframe.attr('id', id);

                    doc.write(''

                        + '<!DOCTYPEhtml><html><head><meta charset="utf-8"/>'

                        + '<basehref="<%=ViewUtil.getRequestPath(request) %>">'

                        + '<div>${content}</div>'

                        );

                doc.close();

            });

//    利用appendTo方法直接将他拼接到指定的div后面   

$iframe.appendTo($("#someContent"));

    }
View Code

5.如果是使用vue的话,可以使用v-html指令即可轻松完成(推荐使用)

接口数据:

 

 

代码使用:

<span style="font-size:14px;color: #686868;"  v-html="item.msg"></span>

 

posted @ 2020-05-11 17:18  阿蒙不萌  阅读(12325)  评论(0编辑  收藏  举报