JavaScript能否单次执行多正则替换：剥离HTML标签+替换图片URL为FontAwesome图标

完全可以在JavaScript中实现，你只需要调整原有正则处理的顺序，先匹配替换图片相关内容，再剥离其他HTML标签即可。

处理逻辑调整 #

你原来的处理逻辑会直接删除所有HTML标签，导致<img>标签中的图片地址无法被捕获，所以调整为三步执行：

1. 优先匹配所有<img>标签，将其替换为FontAwesome图片图标（可按需保留原图地址作为悬浮提示）
2. （可选）如果需要同时处理用户直接发在纯文本里的图片URL，新增一步匹配纯文本中带常见图片后缀的链接
3. 再用你原有正则剥离剩余的其他HTML标签

代码示例 #

let processedContent = post.contentHtml()
  // 替换img标签为FontAwesome图标，保留原图地址作为悬浮提示
  .replace(/<img[^>]+src="([^">]+)"[^>]*>/g, '<i class="fa-solid fa-image" title="图片地址：$1"></i>')
  // 可选：替换纯文本中的图片URL（匹配常见图片后缀，可按需增删）
  .replace(/(https?:\/\/\S+\.(?:png|jpg|jpeg|gif|webp))/gi, '<i class="fa-solid fa-image" title="图片地址：$1"></i>')
  // 最后剥离剩余的其他HTML标签
  .replace(/<\/?[^>]+(>|$)/g, '');

效果示例 #

原始内容：
"hi this is my last post <b>with</b> an image <img src='https://example.com/test.jpg'> and a plain pic url https://example.com/demo.png"

处理后输出：
"hi this is my last post with an image and a plain pic url "
（两个占位位置实际渲染为FontAwesome图片图标，鼠标悬浮可查看对应原图地址）

注意事项 #

• 确保你的项目中已经正确引入FontAwesome资源，图标才能正常渲染
• 纯文本图片匹配的正则可根据业务需求调整，比如增加域名白名单限制、调整支持的图片后缀等

内容的提问来源于stack exchange，提问作者MarkWriteCodes