jQuery 在两个字符串标识符之间选择 HTML答案

【问题标题】：jQuery select HTML between two string identifiersjQuery 在两个字符串标识符之间选择 HTML
【发布时间】：2012-09-01 00:02:25
【问题描述】：

我正在尝试制作图像幻灯片，而我只有一个富文本编辑器来输入图像和文本。所以从这个html：

<h1>title</h1>
<p>description...</p>

<p>#slider</p>

<p><img src="a.jpg" /></p>
<p><img src="b.jpg" /></p>
<p><img src="c.jpg" /></p>

<p>#end-slider</p>

你会如何选择 #slider 和 #end-slider 之间的 html？

这类似于在博客 cmets 中提取 [link] 和 [/link] 之间的文本，例如：[link]http://google.com[/link]

【问题讨论】：

#slider是ID还是文字内容？
不完全“相似”，方括号 [tags] 只能由正则表达式解析 - 通常在服务器端进行清理（嵌套标签等）。现在您正在呈现带有文本节点的实际 DOM 元素，当然您可以用正则表达式解析它们，但是有更好的方法。

标签： javascript jquery regex match

【解决方案1】：

$(document).ready(function() {
    $('p:contains("#slider")')
      .nextUntil('p:contains("#end-slider")')
      .wrapAll("<div id='stuff'></div>");
    var required = $('#stuff').html();
});

http://jsfiddle.net/483kL/

【讨论】：

当然，:contains 选择器可能会捕捉到一些意想不到的东西，例如<p>#slider***headkeyboard***dsgdfhdfjdfj</p>。不过，OP 可能没问题。

【解决方案2】：

试试这个：

$('p:contains("#slider")').nextUntil('p:contains("#end-slider")')

更新：

var end = $('p:contains("#end-slider")');
$('p:contains("#slider")').nextUntil(end).andSelf().add(end)

http://jsfiddle.net/63kQC/

【讨论】：

谢谢，效果很好！还想知道是否有办法选择所有这些，所以标识符和 html 即 #slider html #end-slider ？

【解决方案3】：

试试这个

$(document).ready(function(){
   $('p:contains("#slider")').nextUntil('p:contains("#end-slider")');
});

【讨论】：