rebulid href標記與jQuery

Question

我有這樣的動態HTML：

<div class="msg_body"> 
<p> 
some text... |URI=http://www.somesite.co.il/|some link|EURI| some text |URI=http://www.somesite.co.il/|some link|EURI| , some text... 
</p> 

我需要提取的URI的字符串和替換：

1. |URI= with [<a href"] 
2. | with [>] 
3. |EURI| with [</a>] 

所以...我需要它像這樣的蜂：

<p>some text... <a href="http://www.somesite.co.il/" target="_blank"></a>some link</a> some text <a href="http://www.somesite.co.il/" target="_blank">some link</a> , some text...</p> 

我sta CK在這一點上：

$('.msg_body').find('p').text().replace('|URI=','<a href="'); 

我如何能做到這一點jQuery的？

Answer 1

您可以通過以下方式使用正則表達式：

$('div.msg_body').html($('div.msg_body').html().replace(/\|URI=([^\|]+)\|/g, '<a href="$1" _target="blank">')); 
$('div.msg_body').html($('div.msg_body').html().replace(/\|EURI\|/g, '</a>')); 

Here's an example.

或者，如果你想要的東西多一點簡潔（和緩存jQuery對象），可以簡化爲：

var $msgBody = $('div.msg_body'); 
$msgBody.html($msgBody.html().replace(/\|URI=([^\|]+)\|/g, '<a href="$1">').replace(/\|EURI\|/g, '</a>')); 

Here's an example.

Answer 2

RegExp需要更加細緻才能正確完成這項工作 - 我需要大量的試驗和錯誤才能獲得正確的正則表達式，因此我使用tools like this來快速找出我正在匹配的東西有什麼需要修復等

一個解決方案給您的例子完整的代碼，將如下所示：

var $target  = $('.msg_body p'); 

var text  = $target.text(); 

var replacement = text.replace(/\|URI=([^\|]+)\|([^\|]+)\|EURI\|/g, function(string, url, text){ 
    return '<a href="' + url + '">' + text + '</a>'; 
}); 

$target.html(replacement); 

的replace方法需要一個功能，因爲你不是找到一個做多一段文字並用另一段文字替換它：你正在捕捉一個精心製作的字符串，你需要捕獲這些字符串在預定的代碼位之間敲擊並重新配置它們。 MDN explains using functions with replace pretty well in this article。

最終，棘手的位爲正則表達式本身：

/\|URI=([^\|]+)\|([^\|]+)\|EURI\|/g 

的g在端部只是意味着全局（即，替換字符串中的該每一個實例），和開閉/小號只是正則表達式的符號。 |字符在正則表達式中有特殊含義（它代表OR，意思是它之前或之後的序列是可以互換的），所以你需要通過在它前面加斜槓來逃避它：\|。我們再有就是：

1. \|URI=：找一個序列開始以該字符串
2. ([^\|]+)：捕捉組 - () - 這是由符合字符的一套規則的 - [] - 那些規則是什麼是不是 - ^ - 字符\|（轉義|）。做1次或多次 - +。這將基本上抓住所有字符，直到下一個|並將它們分配給一個組。
3. \|：下一個字符應該是|。
4. ([^\|]+)：與第2步相同，再次捕獲爲一個組。
5. \|EURI\|：序列的結尾。

所以我們在替換方法中的函數總是將整個匹配的string作爲它的第一個參數，而且還將表達式中的任何組作爲更多參數。步驟2中的步驟是我們的url，步驟4我們的text。然後我們返回HTML鏈接語法與相關組件的簡單連接。

這是完成的東西：http://jsfiddle.net/barney/B3E7N/