使用javascript' s替换为通配符来更改字符串中的width属性

时间:2016-03-29 10:26:54

标签: javascript regex string replace

我尝试使用.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>

1 个答案:

答案 0 :(得分:6)

如果您需要使用通配符,则需要使用正则表达式,如此

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

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

注意: "实际上是贪婪的。如果我们之后不使用.*,它将匹配字符串中的所有内容,直到最后?。这就是我们使用"明确表示非贪婪的原因,它会在第一次出现?后停止匹配。

事实上,你知道它只是数字。所以你可以严格按照这个匹配

"

现在,它将匹配零个或多个数字,而不是任何字符。现在我们不使用var moddedURL = fullURL.replace(/width="\d*"/, 'width="100"'); 修饰符,因为当它找到一个不是数字的字符时,RegEx引擎将停止匹配。所以我们不必担心这里的贪婪匹配,除非你的字符串在数字周围有空格。