How to get Surrounding word in javascript or jquery?

Question

I am working with webview and loading the html pages in webview so here I got stuck somewhere, I want to use the javascript.here. I am explaing what I need exactly below: I am having the html data like this-

"My selected the word "widget". But I'd like to know if the selection is after "red" or "blue". Is this possible? I've been scouring the Internet for some advice, and I'm having trouble finding an answer"

So suppose from above text I selected the text " selection is after "(which is shown bold) I need the previous words before this word and the words after this word in that line only. Suppose I select in line 2 so I need all the previous word in that line before the word and all words after the selected word in that line and in case if the selected word is in starting of line so return previous word as null and remaining word after the selected word up-to the end of line similarly for last word vice versa

Please tell we how to achieve it using JavaScript?

Answer 1

What about using match with a regular expression:

var pattern = /^(.+)(selection is after)(.+)$/;
match = "hello selection is after goodbye".match(pattern)

match[1] // hello
match[2] // selection is after
match[3] // goodbye

Answer 2

I created a solution in a JSFiddle at Selecting text before and after word

First I created a paragraph to hold the text to be selected

<p id="yourTextContainer">Lorem ipsum data sid amet</p>

Then, in the JavaScript, I split the paragraph into spans, placing the index of each word in the name attribute. Then, when a word is clicked it used the index to return all words before, and all words after.

    var textindex;
var textbefore;
var textafter;

$(document).ready(function(){
var words=$("#yourTextContainer").text().split(' ');
$("#yourTextContainer").html("");

$.each(words, function(i,val){
//wrap each word in a span tag 
$('<span name="'+ i+'"+ />').text(val +" ").appendTo("#yourTextContainer");

});

$("#yourTextContainer span").live("click",function(event){event.stopPropagation();
                                                          $("#yourTextContainer span").css("background-color","white");
$(this).css("background-color","blue");

//gets the text of clicked span tag
var textselected = $(this).text();
textindex = $(this).attr("name");                                                          
    alert("You just selected "+textselected+" index " + textindex);
textbefore= "";
textafter = "";                                                          
     $("span").each(function (index) { 
         // alert("LOOPING INDEX " + index);
         if (index<(textindex))
             textbefore = textbefore + $(this).text() + " ";
         if (index>(textindex))
             textafter = textafter + $(this).text() + " ";
         });
     alert("Text before is "+textbefore );
     alert("Text after is "+textafter );                                                     
});
});

For example, if you click on "ipsum", the JS alerts, "Lorem" as the text before, and "data sid amet" as the text after "ipsum".

Hope this helps! You can also run the fiddle to see what I mean.