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/