偶尔会有遇到这些需求就是，修改富文本的图片地址，在此简单记录一下。
示例代码：index.html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>JS正则替换富文本内容的所有图片地址，并提取src、alt、style等属性</h1>
</body>
<script type="text/javascript">
// URL前缀
let urlPrefix = 'v1/abcd?filePath='
// 处理前HTML内容
let beforeHtml = '<p>你好世界<img src="blob:http://xxxxxxxxx:8888/be990a356" alt="AAA.png" data-href="" style="width: calc(100% - 100px)"/><img src="blob:http://xxxxxxxxx:8888/11111111111" alt="BBB.png" data-href="" style=""/></p>'
console.log('beforeHtml =>', beforeHtml)
// 处理后HTML内容
let afterHtml = ''
// 加工
if (beforeHtml.indexOf('<img') != -1) {
afterHtml = beforeHtml.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (img, src) {
console.log('img =>', img) // <img src="blob:http://xxxxxxxxx:8888/be990a356" alt="AAA.png" data-href="" style=""/>
console.log('src =>', src) // blob:http://xxxxxxxxx:8888/be990a356
// 提取 alt
// const reg = /alt\s*=\s*([^\s]+)/i
// const reg = /alt=(["']+)([\s\S]*?)(\1)/i
const reg = /alt\s*=\s*[\'\"]?(.*?)[\'\"][^>]/si
const alt = reg.exec(img)
console.log('alt =>', alt)
// [
// 'alt=\"AAA.png\" ',
// 'AAA.png'
// ]
// 提取 style
const styleReg = /style\s*=\s*[\'\"]?(.*?)[\'\"][^>]/si
const style = styleReg.exec(img)
console.log('style =>', style)
console.log('\n')
return '<img src=\"' + urlPrefix + alt[1] +'\" style=\"' + style[1] + '\" />' // <img src=v1/downLoadFile?filePath="AAA.png"/>
})
}
console.log('afterHtml =>', afterHtml)// <p>你好世界<img src="v1/downLoadFile?filePath=AAA.png"/><img src="v1/downLoadFile?filePath=BBB.png"/></p>
</script>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151153.html
