JS - 正则替换富文本内容的所有图片地址，并提取src、alt、style等属性

帅龍之龍

已于 2023-09-22 14:27:06 修改

阅读量1.1k

点赞数 1

分类专栏：前端大杂烩文章标签：前端

于 2022-03-07 10:36:53 首次发布

本文链接：https://blog.csdn.net/Cai181191/article/details/123324224

版权

前端大杂烩专栏收录该内容

69 篇文章 7 订阅

订阅专栏

前言

偶尔会有遇到这些需求就是，修改富文本的图片地址，在此简单记录一下。

一、示例代码

（1）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>