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 ，并为不同的图片动态删除高度。

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

.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,}/吞噬了所有不是＆amp;字符，这就是为什么它超出了URL本身。相反，既然你知道宽度和高度都是数字，你可以只匹配数字：

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

\b是与字边界的零宽度匹配，因此如果你有framewidth = 500，例如它不会受到影响。与高度的2个匹配是这样的，如果它们在每一侧，它将不会替换两个＆amp; s。例如。你不希望'？width = 500＆amp; height = 500＆amp; cache = 123'变成'？width = 300cache = 123'。

Answer 2

除非您在查询中有更多参数，否则应该这样做：

.replace(/(\?width=)[^"]+/i, '$1300');

将它放在控制台中进行测试：

"http://www.example.com/myimage.jpg?width=500&height=500".replace(/(\?width=)[^"]+/i, '$1300');

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

2 个答案: