jquery - 如何使用 jQuery 将前一个、当前和下一个单词包装在标签内？

Question

不确定标题选得好...

我正在尝试在 HTML/JS/CSS 中模拟文本选择，以消除真正选择文本时移动设备上的操作气泡。

更具体地说，我试图避免这种情况:

视觉效果:

我构建它的方式可能会改变，因为这并不重要，所选文本被包裹在 span.selection 内。在该标签内，还有两个插入符用作处理程序:

Lorem ipsum dolor                            <!-- Unselected Text -->

<span class="selection">                     <!-- Start selection wrapper -->

  <span rel="previous" class="caret"></span> <!-- The left-side caret -->

  sit amet, consectetur                      <!-- The selected texts -->

  <span rel="next" class="caret"></span>     <!-- The right-side caret -->

</span>                                      <!-- End selection wrapper -->

adipiscing elit.                             <!-- Unselected Text -->

理想情况下，使用拖放来选择更多或更少的文本会很有趣，但我相信这很难做到，在这种情况下，也许可以使用单击插入符号来选择上一个或更少的文本以下单词并将其包含在 .selection 内不会那么糟糕。

这是 jsfiddle:http://jsfiddle.net/m6Qx4/

周围的文本也可能包含 HTML 标签，例如:<i> , <b> , <span>和<ul>/<li>可能存在使解析变得更加困难。

有什么想法可以做到这一点吗？

状态更新:

我实际上已经设法让它与 .click(); 一起工作使用我的自定义 jQuery 方法的事件监听器。

最终，我将用 jQuery UI 可拖动来替换点击事件，以选择周围的单词，只要它可用于移动设备。

我当前的错误包括红色插入符的重新定位。我已经尝试销毁它们并将它们前置/附加回来，但它仍然不起作用。这可能是 Firefox 的一个错误，在更改文本节点后无法正确重新加载 DOM？

引用: jsFiddle

要检查 jsFiddle.net 由于最近的中断而导致的运行状况，请访问他们的 Tweets .

Answer 1

一些想法:

我不明白如何将所有内容包装在 <span> 中是一个可行的解决方案。当你遇到这样的事情时会发生什么？

<p>The <b>important terms</b> will be bolded in this text</p>

当您选择The important时，你会遇到一些标签困惑，其中 <span>标签的主体想要与 <b> 重叠标签的主体。

我认为更好的解决方案是进行多项选择 <span>具有相同类别的标签。每次遇到 HTML 标记时，您都会跳过该标记并创建一个新选择 <span> 。然后，当您重新定位插入符号时，只需执行以下操作:

$(".selection:first").prepend(startCaret);
$(".selection:last").append(endCaret);

我尝试过这个想法，它对我来说效果很好。如果你想变得非常奇特，你可以尝试合并选择<span>当您在遇到相应的开始标记后找到结束标记时，这会是一个很大的问题，但这会是一项繁重的工作。

<小时/>

由于您指定了绝对定位样式，因此插入符号无法正确移动。将其更改为相对值，并为每个插入符指定主体   。您必须尝试一些其他定位 CSS 设置才能使其看起来恰到好处，但它会按照您预期的方式移动(例如 here )。

<小时/>

当我对此有一些想法时，我尝试对插入符进行绝对定位，这样它们就不必在选择范围内移动 <span> 。那是个错误。我遇到了段落溢出到新行而没有任何标记的问题。坚持您的想法，将插入符号放在您的选择中 <span> .

<小时/>

最后，一些思考问题:

• 您要限制范围吗？ (即，如果您开始在 <p> 标签内进行选择，则不允许选择溢出到该标签之外的下一个 <p> 或后续的任何内容)
• 某些标签是否无法选择？ (即 <table> 、 <script> 、 <select> 等)

我认为这个想法非常酷，但它可能是一个相当庞大的项目。当我把我尝试过的一些原型(prototype)变得更加完美时，我会发布它们。