正则替换html img中的style width和height

**正则替换HTML img中的style width和height**

在处理HTML文档时，经常需要对图片的样式进行调整。其中一个常见的问题是img标签中style属性中width和height的值不正确或过大，这会导致页面布局混乱或图片无法正常显示。在这种情况下，我们可以使用正则表达式来替换这些不合适的值。

**问题描述**

假设我们有一个HTML文档，包含多个img标签，每个img标签都有style属性，其中width和height的值可能是任意数字。我们的目标是通过正则表达式找到所有img标签中的style属性，并将其中的width和height值替换为固定值（例如100px）。

**解决方案**

我们可以使用JavaScript中的正则表达式来实现这个功能。首先，我们需要定义一个函数来匹配img标签中的style属性，然后再次匹配其中的width和height值。

javascriptfunction replaceWidthHeight(htmlString) {
 // 定义正则表达式，匹配img标签中的style属性 let styleRegex = /<img[^>]*style="([^"]*)"[^>]*>/g;
 // 定义另一个正则表达式，匹配style属性中width和height的值 let widthHeightRegex = /widths*:s*(d+)px|heights*:s*(d+)px/g;
 // 使用replace方法替换img标签中的style属性 htmlString = htmlString.replace(styleRegex, (match, style) => {
 // 使用另一个正则表达式匹配style属性中width和height的值 let widthHeightMatch = style.match(widthHeightRegex);
 // 如果匹配成功，则替换width和height的值为100px if (widthHeightMatch) {
 return match.replace(style, `style="width:100px; height:100px;"`);
 } else {
 // 如果匹配失败，则返回原来的style属性 return match;
 }
 });
 // 返回替换后的HTML字符串 return htmlString;
}

javascriptlet htmlString = `
<img src="image.jpg" style="width:200px; height:300px;">
<img src="image2.jpg" style="width:400px; height:500px;">
`;

console.log(replaceWidthHeight(htmlString));

html<img src="image.jpg" style="width:100px; height:100px;">
<img src="image2.jpg" style="width:100px; height:100px;">