2

我正在从数据库中获取 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>

在这里，我想设置图像宽度=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>

所以，我想，问题出在正则表达式中。请帮我纠正这个问题。

非常感谢提前！

4

2 回答 2

1

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

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

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

于 2013-09-04T07:33:21.520 回答
0

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

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

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

"http://www.example.com/myimage.jpg?width=500&height=500".replace(/(\?width=)[^"]+/i, '$1300');
于 2013-09-04T07:41:24.833 回答