使用javascript的“用通配符替换”更改字符串中的宽度属性

Question

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

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>

Answer 1

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

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

在这里，我们使用/width=".*?"/，它是一个正则表达式，它意味着匹配模式width="的任何字符串，该字符串跟随任何出现0次或多次的字符，直到我们看到第一个"。

注： .*实际上是贪婪的。如果之后不使用?，那么它将匹配字符串中的所有内容，直到最后一个"。这就是为什么我们通过使用?显式地使它不贪婪，并且它将在第一次出现"之后停止匹配。

事实上，你知道这只会是数字。所以你可以像这样严格地匹配它

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

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