How can I wrap the previous, current, and next word inside a tag using jQuery?

Question

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 t

Answer 1

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;
while(i--){
    taglessArray[i].replace(/([^\s]*)/g,'$1');
}
//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.