如何使用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 draggable替换click事件,以选择周围的单词,只要它可用于移动设备.

我目前的错误包括红色插入符号的重新定位.我试过摧毁它们并在它们之前添加/追加它们仍然无法正常工作.可能是Firefox的一个错误,在对文本节点进行更改后无法正确重新加载DOM？

参考: jsFiddle

要检查jsFiddle.net由于最近停机的运行情况,请访问他们的推文.

Answer 1

一些想法：

我不明白将所有内容包装在 a 中<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 设置才能使其看起来恰到好处，但它会按照您期望的这些更改移动（示例此处）。

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

最后，几个思考问题：

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

我认为这个想法很酷，但它可能是一个相当庞大的项目。当我对它们进行进一步完善后，我将发布一些我尝试过的原型。