如何使用jQuery将标记中的上一个，当前和下一个单词包装起来? [英] How can I wrap the previous, current, and next word inside a tag using jQuery?

问题描述

不确定标题是否被选择...

Not sure if the title is well chosen...

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

I am trying to simulate text-selection in HTML/JS/CSS to get rid of the action bubble on mobile device when truly selecting texts.

更具体地说，我正在尝试避免这种情况:

To be more specific, I'm trying to avoid this:

视觉效果:

我构建它的方式可能会改变，因为没关系，因为所选文本被包装在span.selection内和该标记内，还有两个插入符号用作处理程序:

The way I built it and it may change because it doesn't matter, is that the text selected is wrapped inside a span.selection and inside that tag, there are also two caret used as handlers:

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里面就没那么糟了.

Ideally, it would be fun to use a drag-n-drop to select more or less texts but I believe this would be darn hard to do and in that case, maybe using click on the carets to select either the previous or the following word and wrap it inside the .selection wouldn't be that bad.

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

Here is the jsfiddle: http://jsfiddle.net/m6Qx4/

周围的文本也可能包含HTML标记，例如:<i>，<b>，<span>和<ul>/<li>可能会出现，使得解析更加困难.

The surrounding texts may contains HTML tags too such as: <i>, <b>, <span> and <ul>/<li> may be present making the parsing harder.

有什么想法可以做到吗?

Any ideas how this can be done?

状态更新:

我实际上已经使用我的自定义jQuery方法使其与.click();事件侦听器一起使用.

I have actually managed to make it work with .click(); event listener using my custom jQuery methods.

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

Eventually, I will replace the click events with jQuery UI draggable to select surrounding words so long as it's useable for mobile devices.

我当前的错误是红色插入符的重新定位.我曾尝试销毁它们，然后将它们添加/添加回去，但仍然无法正常工作.可能是Firefox中的错误，在对文本节点进行更改后，该错误无法正确地重新加载DOM吗?

My current bug consists of the re-position of the red carets. I have tried destroying them and prepend/append them back and it's still not working. It might be a bug with Firefox that can't reload the DOM properly after changes made to Text Nodes?

参考: jsFiddle

要检查由于近期中断而导致的 jsFiddle.net 的运行状况，请访问其 推文 .

Reference: jsFiddle

To check operating condition of jsFiddle.net due to recent outages, visit their Tweets.

推荐答案

一些想法:

我看不到将所有内容包装在<span>中是如何可行的解决方案.当您遇到这样的事情会发生什么?

I can't see how wrapping everything in a <span> is a viable solution. What happens when you have something like this?

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

当您选择The important时，将会出现一些标签混乱，其中<span>标签的主体要与<b>标签的主体重叠.

When you select The important, you'll have some tag mayhem where the <span> tag's body wants to overlap the <b> tag's body.

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

I think a better solution would be to have multiple selection <span> tags with the same class. Each time an HTML tag is encountered, you skip over the tag and create a new selection <span>. Then, when you reposition your carets, you simply do this:

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

我玩这个主意，对我来说很好.如果您真的想花哨的话，可以在遇到结束标记之后，尝试合并选择<span>，这是一个很大的工作.

I played around with this idea and it was working fine for me. If you want to get really fancy, you could try and merge selection <span>s when you find a closing tag after you've encountered its corresponding start tag, but that would be a lot of work.

您的插入符号未正确移动，因为您指定了绝对定位样式.将其更改为相对，并给每个插入符号一个 主体.您必须尝试其他一些CSS定位设置，以使其看起来恰到好处，但是随着这些更改，它会按照您的期望进行移动(示例

Your carets aren't moving correctly because you specify a style of absolute positioning. Change that to relative and give each caret a body of  . You'll have to play around with a few other positioning CSS settings to get it to look just right, but it moves as you'd expect with those changes (example here).

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

As I was playing with some ideas for this, I tried doing absolute positioning on the carets so they didn't have to be moved around inside the selection <span>. That was a mistake. I ran into problems with paragraphs that overflowed to a new line without any markup. Stay with your idea of having the carets inside of your selection <span>.

最后，一些思想问题:

• 您要限制范围吗? (即，如果您开始在<p>标签内进行选择，则不允许选择内容超出该标签而传播至下一个<p>或随后的任何内容)
• 某些标签会无法选择吗? (即<table>，<script>，<select>等)

• Are you going to limit the scope? (i.e., if you start selecting inside a <p> tag, don't allow selection to spill outside of that tag to the next <p> or whatever follows)
• Are certain tags going to be unselectable? (i.e., <table>, <script>, <select>, etc)

我认为这个想法很酷，但这可能是一个庞大的项目.我将发布一些更完善的原型.

I think this idea is pretty cool, but it could be a pretty massive project. I'll post some of my prototypes that I tried when I get them a bit more polished.

这篇关于如何使用jQuery将标记中的上一个，当前和下一个单词包装起来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！