Как вставить гиперссылку в текст с помощью jQuery?

Question

Я хочу сделать кнопку 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>"); 
}); 
}); 

snippent выше охватывает текст с <a>...</a>, однако я не знаю, как вставить HREF к тексту.

Цените свою помощь.

Примечание:

Я хочу ссылки динамически добавляется к тексту, так как эта кнопка будет использоваться в простом текстовом редакторе.

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

EDIT

Кажется, что конкатенации a тег в строку дает только URL, поэтому я завернул его в DIV и извлекается его содержимое для вывода в виде строки.

EDIT 2 Кажется, я скопировал неправильную версию кода. Сожалею.Вот JSFiddle:

http://jsfiddle.net/rok1ev0g/

Answer 2

Вы можете попробовать так:

$('#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

Answer 3

Вы можете дать что-то href, делая это в JavaScript:

element.href = "url"; 

В JQuery вы можете использовать:

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

Answer 4

Попробуйте использовать JQuery завернуть()

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

Answer 5

попробовать:

<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

Answer 6

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