2

Is there a way in JQuery to select a particular word from a sentence entered by the user and he can be able to add a link to the word what ever he wants.Note: The sentence is not hard coded, we don't know which sentence user will enter . Depending on the sentence we have to create a link to the selected word.

user1891145
  • 687
  • 1
  • 5
  • 12
  • too little information. Also it is possible that plain JS is all you need (split for example) – mplungjan Dec 10 '12 at 10:59
  • I guess you could [Use JavaScript and jQuery to Get User Selected Text, and then Do Something (Useful?) With It](http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html) – chridam Dec 10 '12 at 11:05

3 Answers3

1

Combining resources from Use JavaScript and jQuery to Get User Selected Text, and then Do Something (Useful?) With It, wrapping text using jQuery and the part of Sridhar Narasimhan's answer below, you could come up with the following (untested):

HTML:

<input type="text" id="enter"/>
<div id="content" ></div>
<div id="link" ></div>

Javascript:

$("#enter").bind("keyup", function() {
    $("#content").html($("#enter").val());
});

$.expr[":"].containsNoCase = function(el, i, m) {
    var search = m[3];
    if (!search) return false;
    // we'll use text to find what we want...
    return eval("/" + search + "/ig").test($(el).text());
};


if (!window.Kolich) {
    Kolich = {};
}

Kolich.Selector = {};
Kolich.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

$.expr[":"].containsNoCase = function(el, i, m) {
    var search = m[3];
    if (!search) return false;
    // we'll use text to find what we want...
    return eval("/" + search + "/ig").test($(el).text());
};


Kolich.Selector.mouseup = function() {
    var st = Kolich.Selector.getSelected();
    if (st != '') {
        // alert("You selected:\n" + st);
        // wrap selecetd word in a link
        $("#content:containsNoCase('" + st + "')").each(function() {
            var textwithLink = '<a href="javascript:alert(\'link-to-selected-text.htm\')">' + st + '</a>';

            $("#link").html(textwithLink);

        });
    }
}

$(document).ready(function() {
    $(document).bind("mouseup", Kolich.Selector.mouseup);
});

WORKING DEMO

Community
  • 1
  • 1
chridam
  • 100,957
  • 23
  • 236
  • 235
  • I have included a working demo link to jsfiddle http://jsfiddle.net/3CFsd/ Bare in mind I haven't had to fully test this code but that's just the general intuition, could be impoved however. – chridam Dec 10 '12 at 11:59
  • Thanks, I don't want to select entire statement, I want to add a link to a particular word using any external button – user1891145 Dec 10 '12 at 12:00
  • From the demo, it's not selecting the entire input but just the selected text `st`. The code is adding the link to the selected text on selection, I guess you could then handle that with the button click event. – chridam Dec 10 '12 at 12:03
  • I've updated the code to include a line with the selected text wrapped in a custom link http://jsfiddle.net/bGfA2/ – chridam Dec 10 '12 at 12:28
  • If I enter "Hai Chridam" and click on 'chridam' link is adding, its ok. But next time if I click on 'hai', 'chridam' link is disappearing.Is it possible to show both links without disappearing any thing. – user1891145 Dec 10 '12 at 12:41
  • From the requirements, you mentioned `JQuery to select a particular word from a sentence entered by the user and he can be able to add a link to the word what ever he wants`, code above only works for a selected word or words (one-to-one relationship, that is, a link to a selection) and as far as I know you cannot simultaneously add different links to two selections. If this solution has worked for you, please accept it as the answer. – chridam Dec 10 '12 at 13:02
0
Try the below

<input type="text" id="enter"/>
    <div id="content" ></div> 



$("#enter").bind("keyup",function(){

$("#content").html($("#enter").val().replace("Jquery","<a href=''  >Jquery</a>"));
});

Enter Jquery in input and check it.

http://jsfiddle.net/aDRB6/11/

Thanks

Sridhar Narasimhan
  • 2,643
  • 2
  • 17
  • 25
  • Thanks @Sridhar Narasimhan, Here I don't want all the data entered in the text box, i want to select a particular word and add a link to that word. – user1891145 Dec 10 '12 at 11:13
0

Try This.

      Your HTML Structure.
     <input type="text" id="enter"/>
     <input type="text" id="link"/>
     <button type="button" onclick="doAction()">Make Link</button>
     <div id="content" >Mrinmoy Ghoshal</div>

Here is Your Function

       function doAction(){

       var enterv=document.getElementById('enter').value;
       var linkv=document.getElementById('link').value;
       var str=document.getElementById('content').innerHTML;

       var strnew=str.replace(enterv,'<a href="'+linkv+'">'+enterv+'</a>');
       document.getElementById('content').innerHTML=strnew;
       alert(strnew);
       }

Working Demo

Mrinmoy Ghoshal
  • 2,804
  • 1
  • 19
  • 17