使用JavaScript的replace配合通配符修改字符串中的width属性

Question

使用JavaScript的replace配合通配符修改字符串中的width属性

3

我正在尝试使用.replace('width=".*"', 'width="100"')，因为原始的string中width可以是任何值。但目前这并没有改变任何东西。

https://jsfiddle.net/bobbyrne01/8p404z5t/

html

<div id="1"></div><br/>
<div id="2"></div>

javascript

var fullURL = '<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fi.imgur.com%2F…key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=video%2Fmp4&amp;schema=imgur" width="406" height="720" scrolling="no" frameborder="0" allowfullscreen&gt;&lt;/iframe>';

document.getElementById('1').textContent = fullURL;

var moddedURL = fullURL.replace('width=".*"', 'width="100"');
document.getElementById('2').textContent = moddedURL;

结果 ..

<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fi.imgur.com%2F…key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=video%2Fmp4&amp;schema=imgur" width="406" height="720" scrolling="no" frameborder="0" allowfullscreen&gt;&lt;/iframe>

<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fi.imgur.com%2F…key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=video%2Fmp4&amp;schema=imgur" width="406" height="720" scrolling="no" frameborder="0" allowfullscreen&gt;&lt;/iframe>

- bobbyrne01

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thefourtheye · Accepted Answer

如果需要使用通配符，那么您需要使用正则表达式，如下所示。

var moddedURL = fullURL.replace(/width=".*?"/, 'width="100"');

在这里，我们使用了“/width=".*?/"”这个正则表达式，它的意思是匹配任何模式为“width=”后面跟着零个或多个字符的字符串，直到第一个出现的“"”字符。

请注意：“.*”实际上是贪婪的。如果我们不在它后面使用“？”符号，它将匹配字符串中的每一个内容，直到最后一个“"”字符。那就是为什么我们明确使用“？”符号使其非贪婪，它将在其后面第一次出现的“"”字符处停止匹配。

事实上，您知道它只会是数字。因此，您可以像这样严格匹配它。

var moddedURL = fullURL.replace(/width="\d*"/, 'width="100"');

现在，它将匹配零个或多个数字，而不是任何字符。现在我们不使用?修饰符，因为一旦它找到一个不是数字的字符，RegEx引擎就会停止匹配。因此，在这里我们不必过于担心贪婪匹配，除非您的字符串周围有空格。