使用正则表达式给富文本图片标签添加域名进行展示、删除域名提交

最新推荐文章于 2023-07-15 16:36:02 发布

qq_43675010

最新推荐文章于 2023-07-15 16:36:02 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：正则表达式 html javascript vue

本文链接：https://blog.csdn.net/qq_43675010/article/details/120498020

在前端开发中，处理富文本时经常遇到后端返回的图片地址缺少域名。本文介绍了如何使用正则表达式在展示时自动为图片标签添加域名，并在提交时移除，确保图片正常显示且避免后端处理。具体实现是在需要添加域名时，使用`replace()`方法替换`<img>`标签中的`src`属性，而在提交时则移除域名。

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

对于大部分前端来说，富文本是我们经常需要接触的组件之一，往往我们需要回显的时候，后端都是返回不带域名的图片地址，我们这时候是展示不出来，因为这不是一个完整的图片地址。后端不帮忙解决，那就前端来搞，接下来我们需要使用正则表达式把我们的域名拼接到富文本的图片标签中去就能展示了，同理，在提交的时候，我们再把域名删除即可。因为后端是不需要域名的富文本图片标签的，方便以后图片地址环境的更换和维护。

代码很简单：

在需要添加域名展示：

this.productForm.Describe = res.Data.Describe.replace(/<img [^>]*src=['"]/g, '<img src="你的图片域名')

提交的时候域名删除：

this.productForm.Describe = this.productForm.Describe.replace(/https:\/\/[^\/]*(\/)*/g, '/')

以上就是全部代码，要是更严谨可以先进判断值是否存在，因为习惯用vue，便这样赋值了。