javascript - 如何在 JavaScript 中使用正则表达式替换部分文本？

Question

我正在从数据库中获取 HTML 内容并在 UI 中显示。如果显示的内容包含指定了宽度和高度的图像，那么我需要在 UI 中显示时将图像宽度和高度替换为某个固定值。

示例内容如下:

<p>
   Sample paragraph text. 
   <br />
   <img src="http://www.example.com/myimage.jpg?width=500&height=500" 
    title="Test Image" />
   Sample text.
   <br />
</p>

在这里，我想设置图片width=300，并为不同的图片动态移除height。

我尝试使用正则表达式替换文本，如下所示:

.replace(new RegExp("width=([^&]{0,})", 'gi'), 'width=300') 
.replace(new RegExp("[?&]height=([^&]{0,})", 'gi'), '')

但它给出的结果如下:

<p>Sample paragraph text. <br /> <img src="http://www.example.com/myimage.jpg?width=300

它会替换 ?width=300 之后的所有文本。

我想要这样的结果: <p>Sample paragraph text.
<br /> <img src="http://www.example.com/myimage.jpg?width=300" title="Test Image" /> Sample text.<br /></p>

所以，我猜，问题出在正则表达式中。请帮助我更正此问题。

非常非常感谢!

Answer 1

这种模式:/[^&]{0,}/ 吞噬了不是 & 字符的所有内容，这就是它超出 URL 本身的原因。相反，因为您知道宽度和高度是数字，所以您可以只匹配数字:

.replace(/\bwidth=\d*/gi,'width=300')
.replace(/&height=\d*|\bheight=\d*&?/gi,'');

\b 是对单词边界的零宽度匹配，因此如果您有 framewidth=500，例如它不会受到影响。与 height 的 2 场比赛是这样的，如果它们在每一侧，它就不会同时替换 & 。例如。例如，您不希望 '?width=500&height=500&cache=123' 变成 '?width=300cache=123'。