使用javascript替換為通配符來更改字符串中的width屬性

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=" /width=".*?"/ ，這是一個正則表達式，它意味着匹配模式width="任何字符串，跟隨任何出現零次或多次的字符，直到我們看到第一個" 。

注意： .*實際上是貪心的。 如果我們不使用? 之后，它將匹配字符串中的所有內容，直到最后一個" 。這就是為什么我們通過使用?明確地使它非貪婪，並且它將在第一次出現時停止匹配" 。

---

事實上，你知道它只是數字。 所以你可以嚴格按照這個匹配

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

現在，它將匹配零個或多個數字，而不是任何字符。 現在我們不用? 修飾符因為，當它找到一個不是數字的字符時，RegEx引擎將停止匹配。 所以我們不必在此擔心貪婪匹配，除非你的字符串在數字周圍有空格。