如何使用jQuery将超链接插入文本?

时间:2015-04-28 13:07:14

标签: javascript jquery hyperlink

我想制作一个Insert Link按钮。以下是我提出的建议:

$(document).ready(function(){
function HyperLink(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

$('#btnHyperlink').click(function() {
    HyperLink("id_description", "<a>", "</a>");
});
});

上面的代码片段包含<a>...</a>的文字,但是我不知道如何在文本中插入href。

感谢您的帮助。

注意:

我希望将链接动态添加到文本中,因为此按钮将用于简单的文本编辑器。

6 个答案:

答案 0 :(得分:1)

您可以尝试这样:

$('#id_description').html('<a href="http://www.google.com">Google</a>');

<强> JSFIDDLE DEMO

不确定这是否是您正在寻找的内容,但请点击此处:

var field = "http://www.google.com"
$(document).ready(function () {
    $('.id_description').each(function () {
        this.innerHTML += ' <a href=" ' +field + '">Google</a>';
    });
});

<强> JSFIDDLE DEMO

答案 1 :(得分:1)

那怎么样:

$('#btnHyperlink').click(function() {
    var href = prompt("Insert url");
    if(href != "" && href != null)
    {
        HyperLink("id_description", href);
    }
});

功能:

function HyperLink(elementID, url) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = $('<div/>').append(
        $('<a/>').attr('href', url).html(selectedText)
    ).html();
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

修改

似乎将a标记连接成一个字符串只给出了url,因此我将其包装到div中并提取其内容以将其作为字符串输出。

编辑2 似乎我复制了错误版本的代码。抱歉。这是JSFiddle:

http://jsfiddle.net/rok1ev0g/

答案 2 :(得分:0)

您可以通过在JavaScript中执行此操作来提供href

element.href = "url";

在jQuery中你可以使用:

element.attr('href', 'url');

答案 3 :(得分:0)

尝试使用jQuery wrap()

$( "#id_description" ).wrap( '<a href="path"></a>' );

答案 4 :(得分:0)

尝试:

<span class="linkable">Click to insert link</span>

$('.linkable').click(function(){
    var text = $(this).html();
    var link = $("<a>", {
          href: "http://google.com"
        }).html(text);
    $(this).replaceWith(link);
});

JSFiddle

答案 5 :(得分:0)

Maybe this?

$("textarea").on("select", function(){
    var start = this.selectionStart;
    var end = this.selectionEnd;

    var text = this.innerHTML.substring(start, end);
    var link = $("#user_link").val();

    var new_link ="<a href='"+link+"' target='_blank'>"+text+"</a>";


    $(this).after(new_link);
});