Take the 2-minute tour ×

Not sure if the title is well chosen...

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: enter image description here

The visual:

enter image description here

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 -->

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.

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

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?

Status Update:

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

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

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?

Reference: jsFiddle

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

share|improve this question
Below 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. –  arttronics Jun 29 '12 at 23:01
I can't see why you're trying to do this. What's the point? That said, the rangy library might help you. –  thirtydot Jul 4 '12 at 10:01
I 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. –  Cybrix Jul 4 '12 at 15:38
Here is a update: jsfiddle.net/sNpLw/1 you start by double clicking the <p>. Only tested in Firefox –  Cybrix Jul 5 '12 at 5:07
Status Update: Here's my custom version, almost complete but not quite there yet. jsFiddle New Method. Also, here's the tutorial version of this work-in-progress with more comments than markup. –  arttronics Jul 5 '12 at 13:37

2 Answers 2

A few thoughts:

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>

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.

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:


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.

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 &nbsp;. 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).

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>.

Lastly, a few thought questions:

  • 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.

share|improve this answer
I do not want to avoid scope. Because that would also mean that we can't select through strong tag either. My code, so far only limits itself to the surrounding text nodes. I'm trying to figure out a way to detect and regenerate any encountered tags inside my .selection without duplicating those tags too. –  Cybrix Jul 3 '12 at 0:43
+1 @RustyTheBoyRobot, interesting idea of multiple selection <span> tags with the same class which can allow for individual words to have it's background-color set simulating text-selection. –  arttronics Jul 3 '12 at 0:58
@arttronics - Obviously, it could cause some headaches if you ended up with two spans that weren't next to each other. The component would act like everything between the spans was selected, but it wouldn't be. (If that makes sense....) –  RustyTheBoyRobot Jul 3 '12 at 19:33
Humm, that in itself sounds like another method to me... to have the spans onset and offset "act" as the gatekeeper so to speak. –  arttronics Jul 3 '12 at 19:37
Does that mean we have to wrap all words with a span and only the selected ones would contain the .selected? –  Cybrix Jul 4 '12 at 16:07

To cover Rusty's issue:

Split the tags out first:

var textBlock = textContainer.html(),
taglessArray = textBlock.split(/<[^>]*>/),
arrayOfTags = textBlock.match(/<[^>]*>/g),
tagsFirst = (textBlock[0] === '<') ? true : false, //parens for legibility only
//tagsFirst is a switch that tells us which to start splicing back in later

Now let's wrap all of our non-whitespace in span tags we can use

var i = taglessArray.length;
    taglessArray[i].replace(/([^\s]*)/g,'<span class="selectableWord">$1</span>');
//not 100% sure I got that right - haven't tested - but the idea is , wrap all non
//whitespace/word boundary blocks in 'selectableWord' classed span tags

Now stick 'em back together. Original text formatting tags should retain position. Obviously 'selectableWord' classed spans should avoid layout/formatting impact

var addToArray, adderArray;
if(tagsFirst){ addToArray = arrayOfTags; adderArray = taglessArray; }
else { addToArray = taglessArray; adderArray = arrayOfTags; }

var oLen, //used to retain 'original length'
i2 = oLen = (tagsFirst.length + arrayOfTags.length),
rejoinArray = [];

while(i2--){ //not 100% sure I got this right - hope you get the general idea
    var currentKey = oLen - 1 - i2;
    //if first or alternating from first 0,2,4,etc...
    if(currentKey === 0 || ( currentKey % 2 === 0) {
        rejoinArray[currentKey] = addToArray.shift(); //remove first element and return
    //should be keys 1,3,5,etc...
    else {
        rejoinArray[currentKey] = adderArray.shift();

All of the above of course is hugely untested and probably buggy/wrong but I think the basic idea is pretty cool. Rip the tags out. Wrap the array of untagged words in spans you can use. Then splice all the silly tags back in. They should still wrap all the same words. This assumes basic HTML integrity. Your text blocks only contain inline-display tags that would go around words or sets of words. Improper nesting might not be an issue unless there are improperly nested spans.

share|improve this answer
I will try to implement it in a jsfiddle so we can debug it. –  Cybrix Jul 8 '12 at 16:52

Your Answer


