Databases
StackOverflow2013
Postsdbo
POHow can I wrap the previous, current, and next word inside a tag using jQuery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
    primarykey
    data
    text
    <p>Not sure if the title is well chosen...</p> <p>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.</p> <p>To be more specific, I'm trying to avoid this: <img src="https://i.stack.imgur.com/kR1TK.jpg" alt="enter image description here"></p> <p>The visual:</p> <p><img src="https://i.stack.imgur.com/nA6lT.jpg" alt="enter image description here"></p> <p>The way I built it and it may change because it doesn't matter, is that the text selected is wrapped inside a <code>span.selection</code> and inside that tag, there are also two caret used as handlers: </p> <pre><code>Lorem ipsum dolor &lt;!-- Unselected Text --&gt; &lt;span class="selection"&gt; &lt;!-- Start selection wrapper --&gt; &lt;span rel="previous" class="caret"&gt;&lt;/span&gt; &lt;!-- The left-side caret --&gt; sit amet, consectetur &lt;!-- The selected texts --&gt; &lt;span rel="next" class="caret"&gt;&lt;/span&gt; &lt;!-- The right-side caret --&gt; &lt;/span&gt; &lt;!-- End selection wrapper --&gt; adipiscing elit. &lt;!-- Unselected Text --&gt; </code></pre> <p>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 <code>.selection</code> wouldn't be that bad.</p> <p>Here is the jsfiddle: <a href="http://jsfiddle.net/m6Qx4/" rel="noreferrer">http://jsfiddle.net/m6Qx4/</a></p> <p>The surrounding texts may contains HTML tags too such as: <code>&lt;i&gt;</code>, <code>&lt;b&gt;</code>, <code>&lt;span&gt;</code> and <code>&lt;ul&gt;/&lt;li&gt;</code> may be present making the parsing harder.</p> <p>Any ideas how this can be done?</p> <p><strong>Status Update:</strong></p> <p>I have actually managed to make it work with <code>.click();</code> event listener using my custom jQuery methods.</p> <p>Eventually, I will replace the click events with jQuery UI draggable to select surrounding words so long as it's useable for mobile devices.</p> <p>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?</p> <p><strong>Reference:</strong> <a href="http://jsfiddle.net/RmrGQ/2/" rel="noreferrer"><strong>jsFiddle</strong></a><br /><br /> To check operating condition of <strong>jsFiddle.net</strong> due to recent outages, visit their <a href="https://twitter.com/js_fiddle/" rel="noreferrer"><strong>Tweets</strong></a>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCybrix
    1. USCybrix
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
      1. USarttronics
      1. VTFavorite
    3. VO
      singulars
      1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
      1. This table or related slice is empty.
      1. VTModeratorReview
    1. COBelow `console.info` in your jsFiddle, you may need to use variable `lastWordArray` instead of `lastWord` since that was a previous correction. Not to sure what needs to be changed.
      singulars
      1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
      1. USarttronics
    2. COI can't see why you're trying to do this. What's the point? That said, the [rangy](http://code.google.com/p/rangy/) library might help you.
      singulars
      1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
      1. USthirtydot
    3. COI edited the question. It must be more abvious now with the image. And Rangy being a nice plugin indeed, but useless in my case because text selection under Android is simulated and not really "happening" in the WebView.
      singulars
      1. POHow can I wrap the previous, current, and next word inside a tag using jQuery?
      1. USCybrix
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload