2011-07-04 312 views
1

嗨親愛的粉絲!jQuery preg替換

爲了簡短起見,我有一個文本框,在這裏你可以粘貼<img>標籤,它看起來像這樣: <img src="123.jpg" />

有什麼辦法可以使這些<img>看起來這個:<img src="img/upload/username/123.jpg" />使用jQuery .replace()或類似的東西?或者我應該使用PHP函數嗎?

我試圖找出一些regual表達什麼jQuery的.match()回報:

x = text.match(/\<img src="(.*)" \/>\$/); 
alert(x); 

,但它返回奇怪的事,當有一個以上的<img>標籤。

謝謝你的幫助!

+1

我沒有看到一個jQuery這裏... –

+0

嗯,也許我說錯了什麼,但仍然有任何方法來將所有指定的「img」標記使用JavaScript轉換爲另一個src到另一個? – Dmitri

+0

您要找的是6572214;) –

回答

4

未測試......

$('#text').change(function(){ 

    $('img').each(function(){ 
     $(this).attr('src', '/img/upload/username/' + $(this).attr('src')); 
    }); 

}); 

如果你想做到這一點與PHP服務器端只需更換這樣,無需正則表達式...

$text = str_replace('src="', 'src="/img/upload/username/', $text); 

或者如果你想使用正則表達式...

$text = preg_replace('#"(.*?)\.jpg"#is', '"/img/upload/username/\\1.jpg"', $text); 
+0

該死的,真正的解決方案!非常感謝! – Dmitri

+0

@Dmitri,沒問題,用例如'$('#preview img')'替換'$('img')',否則它會替換頁面上的所有圖片; –

0
var text = '<img src="img/upload/username/123.jpg" />'; 
x = text.match(/\<img src="(.*)" \/\>$/); 
alert(x); 

現在你會得到?

match(/\<img src="(.*)" \/\>$/); 
         ^
          |-----------------Becarefull about about ur special char dude.... 
+0

@Dmitri:你得到兄弟.. ...... – K6t

+0

當有超過1個「img」標籤時,似乎不能很好地工作! – Dmitri

1

你想在jquery中使用的函數是.attr()並用你喜歡的任何東西替換內容。這裏是教程頁面:http://api.jquery.com/attr/

+0

也謝謝!爲什麼我沒有想到第一個地方 – Dmitri

1

但它返回奇怪的東西,當有多個標籤。

我認爲這是你沒有使用懶惰匹配的問題。取而代之的(.*)使用(.*?)

+0

謝謝你的提示! – Dmitri

0

你的正則表達式返回不是你所期望的一個以上的標籤,因爲你在這裏使用一個貪婪的量詞:

x = text.match(/\<img src="(.*)" \/>\$/); 
          ^

要解決這個問題試試這個:

x = text.match(/\<img src="(.*?)" \/>\$/); 

我不確定你的逃跑...。通常情況下,你不需要轉義<,我也不明白\$最後的好處。它不在你的字符串中。如果你想有一個字符串結束的錨點,那麼不要轉義它,但是如果你想插入多個標籤,你根本不能使用它。

0

有點潔癖可能是,但:

$(document).ready(function() { 
    $("#text1").change(function() { 
     var val = $(this).val(); 
     var tmp = $(val); 
     var img = tmp.filter("img:eq(0)"); 
     if (img.length == 0) { 
      alert("Please enter an <img/> tag!") 
     } 
     else if (img.attr("src") == undefined) { 
      alert("Please enter an <img/> tag with src attribute!") 
     } else { 
      img.attr("src", "/img/upload/username/" + img.attr("src")) 
      var div = $("<div/>").append(img); 
      $(this).val(div.html()) 
     } 
    }) 
}); 

Demo here