昨天在做公司项目的社区动态内容。后台接口返回的数据是数组套对象，对象里有富文本，然后需要摘出富文本里的img标签在列表里分开渲染（即图片九宫格样式）。
最终效果如图：
这个是后盾接口返回的json数据
1 { 2 "code": "200", 3 "data": { 4 "pageCount": 116, 5 "pageNo": 1, 6 "pageSize": 2, 7 "totals": 271, 8 "list": [ 9 { 10 "accept": false, 11 "anonymous": false, 12 "answers": 0, 13 "collections": 0, 14 "comments": 0, 15 "content": "<strong>转载|今日头条 梦笔三生《旅游文化：五一假期天津2018旅游！五一节旅游推荐好去处！》</strong><br /><br /><strong>天津热带植物观光园<br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=d912aafccb404aa491a122c3392b4fe5' /></strong><br />热带植物观光园拥有加拿大、泰国、澳大利亚、美国、马来西亚等几十个国家和国内南方各省市3000余种各式各样的热带植物，是亚洲室内建筑面积最大的热带植物观光园。<br /><strong>长虹公园<br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=23ad004d9b3b4671acf59e09bb4d71ee' /></strong><br />天津市第一家免费开放的公园，原名湾兜公园。假山迎门而立，右侧一泓湖水，岸上垂柳成荫。山水园利用现有岛屿、水体、植物与陆地围合空间，采用南派建筑风格，构建典型的中国山水庭院，成为园内特色景观。<br /><strong>鼓楼</strong><br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=c3db01d7e01f4ccf994beab276feb83e' /><br />名为鼓楼，实为钟楼。天津设卫筑城，当时，这座'卫城'只不过是土围子。经历了大约九十年，到弘治六、七年才砌成砖城。位于城中心的鼓楼，也是在这个时候修建起来。<br /><strong>广东会馆<br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=2806b6a930e94203a766563050d78439' /></strong><br />广东会馆现已辟为天津戏剧博物馆，位于天津老城中心。馆址于清光绪三十三年（1907年）正月正式落成，是天津市至今保存最完整、规模最大的清代会馆建筑。它既体现了我国岭南的建筑风格，又融合了北方四合院的特点，是中国罕见的木结构建筑艺术珍品。<p><strong>文庙</strong></p><p><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=605213865ebe4141b704a37b86aa71a3' /></p><p>天津文庙是明清两代天津地方官员祭祀我国古代伟大的思想家、教育家、政治家、儒学创始人孔子的庙宇，也是天津学宫所在。始建于明正统元年（1436），由并列的府、县两庙及明伦堂组成，是天津市区现存规模最大、保存最完整的明清建筑群。</p><p><strong>梁启超纪念馆</strong></p><p><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=3dac3107965c473b99e4a69d50cf5a0c' /></p><p>梁启超纪念馆里一百多件家具都是按当年的陈设原汁原味复制的，并根据梁启超后代反复回忆进行布置的，力求贴近当年原貌。纪念馆由原籍新会的广州美术学院教授林敦厚父子设计，铜像栩栩如生，再现了梁启超年青时朝气蓬勃的风采。</p><p><strong>曹禺故居纪念馆</strong></p><p><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=c8face0c2d784bdea757015658e51802' /></p><p>曹禺纪念馆坐落於湖北省潜江市风景优美的曹禺公园内，它是馆藏资料丰富、具有较高艺术品位，也是我国最大的一所纪念曹禺的专业展馆，它将成为目前我国唯一的一所综合展示曹禺杰出贡献和影响世界的展览馆。</p><p><strong>世纪钟广场</strong></p><p><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=c071702a6bbc400689c73016ce4fc8d7' /></p><p>世纪钟位于天津站的西南方，是天津新的标志性建筑——世纪钟。石英钟盘上雕刻着12星座的图案，表盘的侧面为一个巨大的钟摆造型，厚重的锻铜底座上布满大小齿轮与链条和巨大的螺丝，铆钉与古老的解放桥互相映衬，象征着中国近代工业从这里开始。 </p><p><strong>津湾广场</strong></p><p><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=bd67f92863124ce5a42a682998f6ec2b' /></p><p>津湾广场坐落于和平区解放路金融街地区的津湾广场，是天津市20项大服务业聚集的地方之一，是天津金融城的标志性区域。尤其是夜景，超美！</p><p><strong>桥园公园</strong></p><p><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=c6c8a15a7a974ef0b11521028579e54e' /></p><p>桥园国家AAA级景区，是天津市最大的人造生态湿地公园，曾在西班牙巴塞罗纳举办的2009年世界建筑节上,荣获“全球最佳景观奖”。因为是卫国道立交桥边的一个大型绿地，故名桥园。</p>", 16 "cover": "", 17 "createTime": "2018-04-28 00:54:10", 18 "creater": "e4020f0739964664bb50a5a98c040bb3", 19 "essence": false, 20 "finish": false, 21 "followers": 0, 22 "headImgUrl": "http://thirdwx.qlogo.cn/mmopen/vi_32/KJ0mnvribeXibVOtAZAHJFibticF8ibBTTTmxTkfEKLhvVUazY5iaLDsE0ictzQwZ2ozP5KFoUrRKCz3vwzQlUw5zicnFA/132", 23 "id": "8d01e92a130a414ba54bb11c55a1a422", 24 "isReturned": 0, 25 "iscollected": 0, 26 "isuped": 0, 27 "keyword": "", 28 "memo": "", 29 "moduleId": 0, 30 "nickName": "冷风吹", 31 "no": "1421836395", 32 "photo": "75de25f5ed1447c98d3befe07ca21c7b", 33 "returnTimes": 0, 34 "score": 0, 35 "sex": "女", 36 "status": "发表中", 37 "summary": "", 38 "title": "2018五一天津旅游好去处", 39 "top": false, 40 "topicType": "驴游天下", 41 "up": 1, 42 "userName": "冷风吹", 43 "views": 2 44 }, 45 { 46 "accept": false, 47 "anonymous": false, 48 "answers": 0, 49 "collections": 0, 50 "comments": 0, 51 "content": "<p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b>转载|文章屋《写给20岁的自己》</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 如果你已经过了20岁但还不到25岁的话，你必须找到除了爱情之外，能够使你用双脚坚强站在大地上的东西。你要找到谋生的方式。现在考虑不晚了。<br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=135c057005d140c698b00e2bdf79d592' /></b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 我从来不以为学历有什么重要，天才都不是科班，但，不是科班，连龙套都跑不了。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 你必须把那些浮如飘絮的思绪，渐渐转化为清晰的思路和简单的文字。华丽和漂浮都不易长久。你要知道，给予文字阅读快感不够的，内容，思想，境界，灵魂，精神和智慧，这些才重要。不要多看那些和你一个路数的女作家的文字。不要琐碎，无病呻吟。不要想到什么就写。不要流连于小感伤和小感动。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 我要你相信温暖，美好，信任，尊严，坚强这些老掉牙的字眼。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 我不要你颓废，空虚，迷茫，糟践自己，伤害别人。我不要你把自己处理得一团糟。节制自己的感情并且珍惜它，明白这种感情不是任何人都能要。<br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=9082016a8f034ff2905fc1ea858ed588' /></b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 体验生活，是另外一回事，并不意味着堕落和放纵。千万不要认同那些伪装的酷和另类。他们是无事可做的人找出来放任自己无事可做的借口，真正的酷是在内心。你要有强大的内心。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 要有任凭时间流逝，不会磨折和屈服的信念。不是因为在学校的象牙塔中，才说出我爱世界这样的话，是知道外面的黑，脏，丑陋之后，还要说出这样的话。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 好好去爱，去生活。青春如此短暂，不要叹老。偶尔可以停下来休息，但是别蹲下来张望。走了一条路的时候，记得别回头看。时不时问问自己，自己在干嘛?</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 伤心和委屈的时候，要嚎啕大哭。哭完洗完脸，拍拍自己的脸，挤出一个微笑给自己看。不要揉，否则第二天早上会眼睛肿。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 给自己一个远大的前程和目标。记得常常仰望天空。记住仰望天空的时候也看看脚下。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 任何时候，任何人问你，有过多少次恋爱，答案是两次。一次是他爱我，我不爱他。一次是我爱他，他不爱我。好的爱情永远在下一次。别给同一个人两次伤害你的机会。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 不要与浪子，文艺青年交往，别和没心没肺的人在一起，别和没有正当职业混日子的人在一起。<br /><img alt='' src='http://nankai.mooc-cloud.com/NK_DataSystem/image/showImage?id=58281a818ccf4804af87afc00ad9134b' /></b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 别把犯贱当真爱。一个人作践自己来取悦你的时候，千万不要因此感动。一个男人的烟头烫在他身上，下一个就可能烫在你身上。同样的，当这个女人的刀片割断她的手腕，下次就可能割断你的。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 千万别相信一个不准备将你介绍给他的朋友圈子的男人。一个女人只肯喊你“宝贝”的时候，坚持要她喊你的名字，因为你是男人。一个男人或者女人不再来找你的时候，就不要再去找他或者她。不要相信在恋爱上用手段的人。分手时不要口出恶言。吸取教训，但不要后悔。后悔没有用。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 别去做撕照片，烧信，撕日记这样一类三流爱情电视剧中才有人干的事。相信爱情。相信好男人和好女人还存在，还未婚，还在茫茫人海中寻觅你。别说“男人(或者女人)没一个好东西”，这样使别人误以为你阅人无数。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 爱物质，适当地。永远知道精神更重要。比起那些名表，名牌，时装，更加美丽的是勤奋而有朝气的你自己。如果你20岁以后所花的每一分钱还都是伸手向父母亲人要来的，那你的满身名牌就只能衬托出你的无耻。别以为穿上名牌你就有品位，要知道如果没有真正的内涵，骡子配上金鞍也不会变成骏马。你还年轻，先不说开始你的事业，开创你的未来，但你已经成年，至少也要让自己不再成为父母的负担，让父母看到20年辛苦养育的希望。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 无所事事只会把你变成一个废物，一个被所有其他人鄙夷的废物，因为这样的你是一个不折不扣的寄生虫。别以为弄个怪异的发型，穿上不男不女的衣服，喷上刺鼻的香水，别人就会注重你，要明白那样招来的眼光就是别人在看一只与众不同的猴子。许多有教养的人对另类的你的反感并不写在脸上，但这种反感确凿无疑肯定会给你带来极其不利的后果。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 别瞧不起劳动人民。不要为劳动羞耻。土地不脏，汗味不难闻。请尊重那些似乎生活状况不如你，但仍然用自己的双手诚实劳动养家糊口的人，因为这样才是尊重自己。永远体恤那些生活在底层的人们，因为我们的亲人就是在这些人群中。我们不娇贵。我们必须能够自己养活自己，这是你的尊严所在。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 不要小看一分钱。不妨自己去挣挣看。做人有时要强悍一点，被欺负的时候，一定要讨回来!但是不要记恨。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 小人之见，随他们去好了。有原则的宽容和怜悯，会使你高贵。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 有小心机的女生是可爱的，但别把这种心计用在勾心斗角上，那样会很累。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 做人不要太高调，高调容易招惹是非。但也不能太低调，该强悍时则强悍，但切不可咄咄逼人。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 被朋友伤害了的时候，别怀疑友情，但提防背叛你的人。原谅，但并不遗忘。做人存几分天真童心，对朋友保持一些侠义之情。要快乐，要开朗，要坚韧，要温暖。这和性格无关。但你要忠诚，勤奋，要真诚的尊重别人，这样你的人生才不会黑暗。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 宽待自己，也宽待别人。当你不会因为小小的不如意小小的事而生气或难过的时候，你会轻松很多。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 要原谅这个世界和自己。</b></span></span></p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'> </p><p style='margin:0cm 0cm 0.0001pt; text-align:justify'><span style='font-size:10.5pt'><span style='font-family:等线'><b> 要告诉自己，我值得拥有最好的一切。</b></span></span></p>", 52 "cover": "", 53 "createTime": "2018-04-28 00:03:06", 54 "creater": "e4020f0739964664bb50a5a98c040bb3", 55 "essence": false, 56 "finish": false, 57 "followers": 0, 58 "headImgUrl": "http://thirdwx.qlogo.cn/mmopen/vi_32/KJ0mnvribeXibVOtAZAHJFibticF8ibBTTTmxTkfEKLhvVUazY5iaLDsE0ictzQwZ2ozP5KFoUrRKCz3vwzQlUw5zicnFA/132", 59 "id": "4acefd7baae94df7bbbfb1711b912d2b", 60 "isReturned": 0, 61 "iscollected": 0, 62 "isuped": 0, 63 "keyword": "", 64 "memo": "", 65 "moduleId": 0, 66 "nickName": "冷风吹", 67 "no": "1421836395", 68 "photo": "75de25f5ed1447c98d3befe07ca21c7b", 69 "returnTimes": 0, 70 "score": 0, 71 "sex": "女", 72 "status": "发表中", 73 "summary": "", 74 "title": "写给20岁得自己", 75 "top": false, 76 "topicType": "全部", 77 "up": 0, 78 "userName": "冷风吹", 79 "views": 3 80 } 81 ] 82 }, 83 "message": "获取帖子列表成功" 84 }
取其中两个对象，list数组下的content是后台接口返回的富文本里的内容，里面包含各种标签和样式。
现在开始摘出img，并且标准化列表页显示的内容：
1 this.topicList = res.data.list; // 请求接口返回的数据 2 for (var i = 0; i < this.topicList.length; i++) { 3 var textareaHtml = this.topicList[i].content; // 循环，分别取出每个item的富文本内容 4 var num = 0; // 列表页为显示九宫格，限定num最大为9 5 var img = textareaHtml.match(/<img[^>]+>/g); // 利用正则，取出所有img标签，数据格式为数组 6 if (img) { // 判断这条富文本里是否有img，不做判断的话img.length会报错 7 if (img.length > 9) { // 限定列表图片显示个数 8 num = 9 9 } else { 10 num = img.length 11 } 12 } 13 arrImg = '' // 定义空字符串，下面会往里边填充img标签 14 for (var j = 0; j < num; j++) { 15 // 正则匹配，摘出img标签下的src里的内容，即capture 16 img[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) { 17 arrImg += '<div class="img-box" style="background: url(\'' + capture + '\') no-repeat center / cover;width:30.3333%;height:100px;float:left;margin: 0 1.5% 10px 1.5%;" ></div>' 18 }); 19 // 这边为了不让九宫格里的图片压缩，所以放置在div的背景里 20 } 21 var newImg = arrImg // 将取出来的img放置到newImg中 22 this.topicList[i]['img'] = newImg; // 给数组对象添加属性，即可在页面里赋值 23 }
在html里循环topicList，每个item都会有一个img属性，即为宫格图片的内容。