用正则将带标签字符串转换成标签

最新推荐文章于 2023-09-27 10:22:58 发布

前端华仔

最新推荐文章于 2023-09-27 10:22:58 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：正则表达式 vue vs Code 文章标签： javascript vue.js html

本文链接：https://blog.youkuaiyun.com/weixin_37746257/article/details/105976431

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

vs Code

4 篇文章

订阅专栏

正则表达式

1 篇文章

订阅专栏

本文介绍了一种使图片在网页中自适应显示的方法，通过修改HTML代码实现图片宽度的自适应调整，适用于不同屏幕尺寸的设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.后端同事给到数据

"<p><img src=\"https://cbu01.alicdn.com/img/ibank/2019/837/044/12219440738_1848546139.400x400.jpg\" alt=\"0\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/898/434/12219434898_1848546139.400x400.jpg\" alt=\"1\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/115/854/12219458511_1848546139.400x400.jpg\" alt=\"2\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/983/879/12147978389_1848546139.400x400.jpg\" alt=\"3\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/278/191/12185191872_1848546139.400x400.jpg\" alt=\"4\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/937/709/11962907739_1848546139.400x400.jpg\" alt=\"5\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/440/571/12112175044_1848546139.400x400.jpg\" alt=\"6\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/2019/610/961/12041169016_1848546139.400x400.jpg\" alt=\"7\" width=\"750\" /></p>"

2.需要纯标签，并且宽度可以自适应

<p><img src="https://cbu01.alicdn.com/img/ibank/2019/837/044/12219440738_1848546139.400x400.jpg" alt="0" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/898/434/12219434898_1848546139.400x400.jpg" alt="1" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/115/854/12219458511_1848546139.400x400.jpg" alt="2" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/983/879/12147978389_1848546139.400x400.jpg" alt="3" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/278/191/12185191872_1848546139.400x400.jpg" alt="4" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/937/709/11962907739_1848546139.400x400.jpg" alt="5" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/440/571/121121100%44_1848546139.400x400.jpg" alt="6" width="100%" /><img src="https://cbu01.alicdn.com/img/ibank/2019/610/961/12041169016_1848546139.400x400.jpg" alt="7" width="100%" /></p>

3.实现方法

let html = this.detail.replace(/\\/g, '').replace(/750/g, '100%').replace(/(^"+)|("+$)/g, '')
let detail = document.getElementById('detail')
detail.innerHTML = html