zoukankan      html  css  js  c++  java
  • 前端接收后端传来的富文本内容,并换行,格式化显示在页面中

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

    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=" 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=" 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(/(
    )/g, "");  
            description = description.replace(/(	)/g, "");  
            description = description.replace(/(
    )/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>
  • 相关阅读:
    【转】linux之fsck命令
    【转】linux之mkfs/mke2fs格式化
    【转】linux_fdisk命令详解
    【转】linux之ln命令
    [转]linux的du和df命令
    [转]Linux之type命令
    [转]Linux下which、whereis、locate、find 命令的区别
    [转]Linux的chattr与lsattr命令详解
    get 与post 的接收传值方式
    在asp.net前台页面中引入命名空间 和连接数据库
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/12870374.html
Copyright © 2011-2022 走看看