0

我有这个动态的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>

我在这一点上堆叠：

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

我怎么能在jquery中做到这一点？

4

2 回答 2

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>'));

这是一个例子。

或者，如果您想要更简洁的东西（并缓存 jQuery 对象），可以将其缩短为：

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

这是一个例子。

于 2013-04-25T10:30:08.667 回答
0

RegExp 需要更精细一些才能正确完成工作——我需要大量的试验和错误才能得到正确的正则表达式，所以我使用这样的工具来快速找出我匹配的是什么，什么需要修复等

以您的示例为例，解决方案的完整代码如下：

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方法需要一个函数，因为您所做的不仅仅是查找一段文本并将其替换为另一段：您正在捕获一个复杂的字符串，您需要在其中捕获子字符串并在预定的代码位之间重新配置它们。MDNreplace在这篇文章中很好地解释了函数的使用。

最终，棘手的是正则表达式本身：

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

g末尾的只是表示全局（即替换字符串中 this 的每个实例），而开头和结尾的/s 只是正则表达式的符号。该|字符在正则表达式中具有特殊含义（它代表OR，表示它之前或之后的序列是可互换的），因此您需要通过在它前面放置一个斜杠来转义它：\|. 那么我们拥有的是：

  1. \|URI=: 查找以该字符串开头的序列
  2. ([^\|]+)：捕获一个组——()它由一个匹配一组规则的字符组成[]——那些规则不是任何东西——字符^（\|转义|）。这样做 1 次或多次 - +。这将基本上抓取所有字符，直到下一个字符|并将它们分配给一个组。
  3. \|: 下一个字符应该是|.
  4. ([^\|]+)：同第2步，再次抓包。
  5. \|EURI\|: 序列结束。

所以我们在 replace 方法中的函数总是将匹配的整体string作为它的第一个参数，但也会将表达式中的任何组作为进一步的参数。第 2 步中的一个是我们的url，第 4步是我们的text。然后我们返回 HTML 链接语法与相关组件的简单串联。

这是完成的事情：http: //jsfiddle.net/barney/B3E7N/

于 2013-04-25T10:51:43.183 回答