Question

JQuery中是否有一种方法可以从用户输入的句子中选择一个特定的单词，并且他可以添加一个链接到他想要的单词。注意：句子没有硬编码，我们不知道知道哪个句子用户会输入。根据句子，我们必须创建一个指向所选单词的链接。

Answer 1

结合Use JavaScript and jQuery to Get User Selected Text, and then Do Something (Useful?) With It，wrapping text using jQuery的资源以及下面Sridhar Narasimhan的回答，您可以提出以下内容（未经测试）：

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

Answer 2

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>"));
});

在输入中输入Jquery并检查它。

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

由于

Answer 3

试试这个。

      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>

这是你的功能

       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

添加句子中单词的链接

3 个答案: