正则表达式替换html文本中的src内容

正则表达式替换html文本中的src内容

最近需要在修改数据库中大量html文本中的src内容，涉及到的标签有<img>、<video>等，手动修改太过麻烦。静态匹配又不准确。于是想要使用正则表达式来做。

样本示例：

// ......
<img src=\"http://192.168.128.30:8888/xf.png \" width=\"100\" height=\"50\" />
// ......
<img style=\"width:100px;height:50px\" src=\"http://192.168.128.30:8888/xfdssa.png\" />
// ......

(为什么有\这个符号？-- 因为修改的html文本存在数据库中。。)

目的：
将所有记录的src地址http://192.168.128.30:8888/xf.png替换为：resources/xf.png。

实现

既然使用正则表达式来做，核心就是正则表达式：

• 匹配出这个html文本中的< ... src ...>标签
• 在这个标签中，进一步匹配src的内容
• 在src内容中，拿到http域名地址
• ==》将地址替换为字符串

所以，核心正则表达式：

【匹配标签中的src】 : `<[^>]*?src\s*=\\s*[""']?(匹配出域名网址)[ '""][^>]*?>`
 + 
【匹配出域名网址（带端口）】: `(?:http|https)?://[\d]+(?:\.[\d]+)+:\d{1,5}`
 =
 `<[^>]*?src\s*=\\s*[""']?((?:http|https)?://[\d]+(?:\.[\d]+)+:\d{1,5})[^>]*?>`

可以匹配出标签中的src=\中的（http或者https）IP地址

/* `(<img[^>]*?src\s*=\\s*[""']?)((?:http|https)?://[\d]+(?:\.[\d]+)+:\d{1,5})([^>]*?>)`
	//  <img src=\"http://192.168.128.30:8888/dasfffff" width="100" height="50" />
			===》$2: http://192.168.128.30:8888
	//	<img style="width:100px;height:50px" src=\"http://192.168.128.30:8888/dfdfd.1234" />
			===》$2: http://192.168.128.30:8888
*/

只要控制代码将正则表达式匹配出来的内容替换就可以。

这里使用golang实现：

// 封装使用正则表达式做替换的方法
func ReplaceStringByRegex(str, rule, replace string) string {
	reg := regexp.MustCompile(rule) // 正则表达式解析失败会直接panic
	return reg.ReplaceAllString(str, replace )
}

// 正则表达式匹配
func UpdateTheStepWhtiRegexp(src string) string {
	// src 不止img，还有video
	regGetImgSrcRule := `(<\s*[^>]*?src\s*=\\s*[""']?)((?:http|https)?://[\d]+(?:\.[\d]+)+:\d{1,5})([^>]*?>)`

	return ReplaceStringByRegex(src, regGetImgSrcRule, "$1/resources$3")
}

这样就可以实现html文本中src资源内容的更改了。

func Test_RegexpRepalce(t *testing.T) {
	var regx = `(<[^>]*?src\s*=\\s*[""']?)((?:http|https)?://[\d]+(?:\.[\d]+)+:\d{1,5})([^>]*?>)`

	var str = `Hello World..
<img src=\"http://http://192.168.128.30:8888/dasfffff" width="100" height="50" />hfhhgfh
<img src=\"http://192.168.128.30:8888/dsdds/g.png" width="100" height="50">ghfhghf
<img style="width:100px;height:50px" src=\"http://192.168.128.30:8888/dfdfd.1234" />hfhhhgfhf`

	// 	res := `Hello World..
	// <img src=\"/dasfffff" width="100" height="50" />hfhhgfh
	// <img src=\"/dsdds/g.png" width="100" height="50">ghfhghf
	// <img style="width:100px;height:50px" src=\"/dfdfd.1234" />hfhhhgfhf`

	reg, err := regexp.Compile(regx)
	if reg == nil || err != nil {
		fmt.Println("正则MustCompile错误:" + err.Error())
	}
	afterReplace := reg.ReplaceAllString(str, "$1/resource$3")
	fmt.Println(afterReplace)

	// for i, match := range reg.FindAllString(str, -1) {
	// 	fmt.Println(match, "found at index", i)
	// 	res := reg.ReplaceAllString(match, "$1$3")
	// 	fmt.Println("==>:", res)
	// 	// assert.Equal(t, res, "")
	// }
	// assert.Equal(t, res, afterReplace)
}

这个正则表达式可以匹配出html标签中的许多内容，这里记录一下，以后肯定会再次遇到类似的需求。