使用js正则表达式分割内容分别显示

目的：一段文字使用特殊字符表示图片，达到文字和图片嵌套显示的效果

假设后台服务器得到
{‘titile’:’标题’,
‘content’:’内容’,
‘last_update_date’:’2016-04-08 21:33’,
‘pic1’:’’}

• 将content通过pattern正则，content.split(pattern)，将其分成数组contentArr
• 使用content.match(pattern)得到图片标特殊符号的数组
• 使用for循环遍历出来
• 使用js动态创建p（显示内容）、img（显示图片）标签

JS代码：

<script>
 window.onload=function(){
     var id = document.getElementById('getId');
     var content=id.innerHTML;
     var pattern=/@img\d+;\s/ig;
     var contentArr = content.split(pattern);
     var patternArr = content.match(pattern);
     for(var i=0;i<contentArr.length;i++){
         var p = document.createElement('p');
         var oDiv = document.getElementById('box');
         oDiv.appendChild(p);
         var contentText = document.createTextNode(contentArr[i]);
         p.appendChild(contentText);
         if((contentArr.length-i-1)!=0){
             var img = document.createElement('img');
             oDiv.appendChild(img);
             switch(patternArr[i][4])
             {
                 case '0':
                     img.src = document.getElementById('pic').innerHTML;
                     break;
                     img.src = document.getElementById('pic1').innerHTML;
                     break;
                 case '2':
                     img.src = document.getElementById('pic2').innerHTML;
                     break;
                 case '3':
                     img.src = document.getElementById('pic3').innerHTML;
                     break;
                 case '4':
                     img.src = document.getElementById('pic4').innerHTML;
                     break;
                 case '5':
                     img.src = document.getElementById('pic5').innerHTML;
                     break;
             }

         }
     }
 }
    </script>

控制台展现效果：

数据库字段：

create table td_news(
    news_id bigint(20) primary key
    title   varchar(100)        //标题
    subtitle    varchar(100)//副标题
    content varchar(18000)      //内容
    last_update_date datetime   //发表时间
    pic varchar(250)        //标题图片
    pic1    varchar(250)        //图片1
    pic2    varchar(250)        //图片2
    pic3    varchar(250)        //图片3
    pic4    varchar(250)
    pic5    varchar(250)
);

html代码：

注：newsInstance是从数据库取出td_news数据

<div class="page_content">
    <div class="container">
        <div class="p_t bg_white">
            <div class="page_title text-center">
                <div class="big_title"><h1>标题：${newsInstance.title}</h1></div>
                <div class="page_time text_gray">发表时间：${newsInstance.lastUpdated}</div>
            </div>
            <div class="l_title"><h4>副标题：${newsInstance.subtitle}</h4></div>
            <div class="p_c">
                <div id="box"></div>
                <div id="getId" hidden="hidden">${newsInstance.content}</div>
                <div id="pic1" hidden="hidden">${newsInstance.pic1}</div>
                <div id="pic2" hidden="hidden">${newsInstance.pic2}</div>
                <div id="pic3" hidden="hidden">${newsInstance.pic3}</div>
                <div id="pic4" hidden="hidden">${newsInstance.pic4}</div>
                <div id="pic5" hidden="hidden">${newsInstance.pic5}</div>
                <div id="pic" hidden="hidden">${newsInstance.pic}</div>
            </div>
        </div>

    </div>
</div>

CSS代码：

.page_content{
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 95vh;
    background: #F6F6F6;
}
.bg_white{
    background: #ffffff;
}
.text_gray{
    color: #666;
}
.p_t{
    margin-top: 50px;
    padding: 30px;
}
.page_title{
    border-bottom: 1px #666 dashed;
    margin: 20px 0;
}
.page_time{
    margin: 20px 0;
}
.l_title,
.p_c{
    margin: 20px;
}