找到和追加字符串

Question

編輯：所提出的問題/答案並沒有解決我的問題：讓我改一下：找到<img src="和" />"之間的字符串，並與原來的加上另一個字符串像?w=500替換它。我認爲這可能適用於正則表達式，但我很樂意以任何JS方式進行。我沒有jQuery的在這方面雖然....

比方說，我有一個包含一些標記，用圖像標記，除其他事項外的字符串，像這樣：

<img src="supercool.jpg" /> 
<p>very cool</p> 
<img src="mega.jpg" /> 

哪有我，用正則表達式或其他方式，給定的字符串（比如?w=500）追加到每個src屬性，讓我結束了

<img src="supercool.jpg?w=500" /> 
<p>very cool</p> 
<img src="mega.jpg?w=500" /> 

我看了上如此相似的問題，但一直沒能制定一個解決方案，我的正則表達式技能太差了:)

Answer 1

我分享一些PHP代碼使用字符串替換可能是這可以幫助你。 把所有代碼放在一個單引號變量中，並用.jpg替換.jpg？w = 500。並用純文本設置標題。

echo str_replace(".jpg",".jpg?w=500",$a); 

---

Answer 2

正則表達式沒有元素或屬性的理解，所以下面的正則表達式是高度易碎。它僅查找src=""並將給定的字符串附加到引號之間的任何內容。對於一次性腳本來說，這應該足夠了。對於任何更復雜的東西，都可以使用適當的HTML解析器，如SAX或DOM。

var in = '<img src="asd.png" /> <img src="ddd.jpeg" />'; 
var out = in.replace(/src=\"(.*?)\"/g, "src=\"$1?w=500\""); 

出來：

<img src="asd.png?w=500" /> <img src="ddd.jpeg?w=500" />

---

如果你想做到這一點在瀏覽器中（沒有指定），你想是這樣的（jQuery）：

$("img[src]").each(function() { 
    this.src = this.src + "?w=500"; 
}); 

Answer 3

對於非常簡單的情況，您可以使用reg exp來匹配基本的HTML，但一旦變得複雜，reg exp是一個糟糕的主意。有時候你需要清理一些代碼並且工作正常。

隨着你的情況，你的html結構很簡單，所以你可以做一個匹配。

var txt = document.getElementById("in").value; 
 
var result = txt.replace(/(<img.*\ssrc=['"])([^'"]+)/g, function(m, l, s){ 
 
    return m + (s.indexOf("?")!=-1 ? "&" : "?") + "w=500"; 
 
}); 
 
document.getElementById("out").value = result;

<textarea id="in" rows="4" cols="50"> 
 
    &lt;img src="supercool.jpg" /&gt; 
 
    &lt;p&gt;very cool&lt;/p&gt; 
 
    &lt;img src="mega.jpg?foo=bar" /&gt; 
 
    &lt;img alt="boo" src="mega.jpg" /&gt; 
 
</textarea> 
 
<textarea id="out" rows="4" cols="50"></textarea>

，但它可以被打破很容易....你最好創建一個DOM片段，與DOM的工作和不斷變化的屬性。 DOM解決方案的問題在於它會嘗試加載圖像，這是我認爲您首先要避免的。

Answer 4

根據this @Gumbo answer並假設您給出的字符串，img標記在src之前沒有任何額外屬性，您可以應用此RegEx。

let str = '<img src="supercool.jpg" /><p>very cool</p><img src="mega.jpg" />'; 
 
let res = str.replace(/<img src="(?:[^"\/]*\/)*([^"]+)"/g, '<img src="$1?w=500"'); 
 
console.log(res);

如果你不需要任何額外的考慮你的問題看起來更像是一個我掛你的副本。