查找自定义'divider'>相应地包裹每一面

Question

我正在寻找一种方法来定位文档中的特定标记，例如!divide!或--divide--在普通人类所写的语言中通常不存在的东西但是某些东西并不需要火箭科学家来召唤而又是一个独特的标记。来自普通文本。

然后瞄准!divide!并在移除!divided!时包装文本。像这样：

Lorem ipsum dolor !divide! sit amet成为>>

<p>Lorem ipsum dolor</p> <p>sit amet</p>

和

Lorem !divide! ipsum dolor !divide! sit amet成为>>

<p>Lorem</p> <p>ipsum dolor</p> <p>sit amet</p>

这是..嗯，这是我到目前为止。最重要的是，我试图将我的想法聚集在一起并尝试告诉我在这里寻找什么：http://jsfiddle.net/PvMJL/2/

Answer 1

如果你有嵌套的.TextCont元素，这将避免问题。如果不会发生这种情况，你可以摆脱not()^[docs]方法。

var with_dividers = $('.TextCont:contains("--divider--")')
               .not('> .TextCont:contains("--divider--")');


with_dividers.html(function(i,htm) {
    return '<p>' + htm.split('--divider--').join('</p><p>') + '</p>';
});

示例：http://jsfiddle.net/CFLV4/

我将ID更改为类，因为重复的ID无效。

---

编辑：要解释，在JavaScript中，您不附加开始和结束标记。你需要考虑处理整个元素。

在上面的代码中，html()^[docs]方法传递了一个函数。函数的返回值是元素的新内容。 htm参数传递给当前内容的String。

所以我们所做的就是获取现有的内容，并做一个.split('--divider--')，产生一个数组，如：

['<span>Lorem</span>',
  '<a href="#">ipsum</a>',
  'dolor sit amet.'
]

如您所见，--divider--文本已被删除，字符串分割为--divider--所在的位置。

然后我们在数组上做一个.join()，使用'</p><p>'作为连接文本，给我们：

'<span>Lorem</span></p><p><a href="#">ipsum</a></p><p>dolor sit amet.'

...但当然我们错过了我们的开始和结束标签，所以我们将它们添加到开头和结尾，所以我们的代码：

'<p>' + htm.split('--divider--').join('</p><p>') + '</p>'

......最终给了我们：

'<p><span>Lorem</span></p><p><a href="#">ipsum</a></p><p>dolor sit amet.</p>'

这是函数的返回值，因此成为新内容。

Answer 2

试试这个

var textToSearch = "!divide!"
$('containerSelector:contains("'+ textToSearch +'")').each(function(){
   $(this).html("<p>" + $(this).text().replace(textToSearch, "</p> <p>") + "</p>");
});