Сделать активные гиперссылки для выделенного текста в текстовом поле HTML с помощью java-скрипта

Я пытаюсь подготовить Javascript-функцию, которая изменяет URL «выбранного текста» на полностью активные гиперссылки HTML.Сделать активные гиперссылки для выделенного текста в текстовом поле HTML с помощью java-скрипта

Мой HTML-код:

<html> 
    <body> 
     <textarea id="my_input" cols="32" rows="16" textToDisplay>Some text with https://www.google.pl/?gws_rd=ssl for simple WYSIWYG function</textarea> 
     <input type="submit" value="[to url]" onclick="make_url('my_input')" /> 
    </body> 
</html>

Мой JS функции:

<script> 
    function make_url(my_input) { 
     var my_input=document.getElementById(my_input); 
     var selected_text=window.getSelection(); 
     my_input.value=my_input_begin.value + '<a href="'+selected_text+'">'+ selected_text +'</a>' + my_input_end.value; 
    } 
</script>

Но после выбора https://www.google.pl/?gws_rd=ssl и нажав отправить я получаю пустой HTML гиперссылок. Что не так? window.getSelection()/document.getSelection() не получает выделенный текст.

Второй вопрос: как получить my_input_begin.value и my_input_end.value или заменить только «выбранную» часть моей записи <textarea>?

источник

2016-12-13 Dentarius

Возможный дубликат [Как получить выделенный текст из текстового поля управления с JavaScript] (http://stackoverflow.com/questions/275761/how-to-get-selected-text-from-textbox-control-with-javascript) –

-1

Попробуйте этот код:

<html> 
<head> 
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
</head> 
<body> 
    <textarea id="my_input" cols="32" rows="16" onclick="this.focus();this.select()">Some text with https://www.google.pl/?gws_rd=ssl for simple WYSIWYG function</textarea> 
    <p id="link"></p> 
    <input type="button" value="[to url]" onclick="make_url()" /> 
</body>

Нажмите на текстовое поле, чтобы получить первый текст выбранного и нажмите на кнопку [для URL].

<script> 
     function make_url() { 
      var textComponent = document.getElementById("my_input"); 
      var selectedText; 
       // IE version 
       if (document.selection != undefined) 
       { 
       textComponent.focus(); 
       var sel = document.selection.createRange(); 
       selectedText = sel.text; 
       } 
       // Mozilla version 
       else if (textComponent.selectionStart != undefined) 
       { 
       var startPos = textComponent.selectionStart; 
       var endPos = textComponent.selectionEnd; 
       selectedText = textComponent.value.substring(startPos, endPos) 
       } 
      var link = document.getElementById("link"); 
      var a = document.createElement("a"); 
      var href = document.createTextNode("Link"); 
      a.appendChild(href); 
      a.setAttribute("href", selectedText); 
      document.body.appendChild(a); 
    }

Примечание: Каждый раз, когда вы добавляете новый текст в текстовое поле и нажмите на кнопку [для URL] новый гипер ссылка будет generated.Also я использовал библиотеку JQuery для выбора, так что вы необходимо прикрепить его на странице.

Надеется, что это работает отлично ☻

источник

2016-12-13 23:15:30 ArbaazAJ

Если вы копируете код откуда-то, добавьте ссылку источника как авторское право. Вы даже не изменили имена переменных в [этой функции] (http://stackoverflow.com/a/275825/1908331), хотя вы добавили свой код в конец этой функции. Но, пожалуйста, укажите свой источник, с которого у вас возникла ваша идея. – EhsanT

@ EhsanT Хорошо, я буду иметь в виду в следующий раз. – ArbaazAJ

Я разобрался. Окончательный код Javascript является:

function text_to_hyperlink(input_id) { 
    var text_entry = document.getElementById(input_id); 
    var text_selected; 

    // for IE 
    if (document.selection != undefined) { 
     text_entry.focus(); 
     var sel = document.selection.createRange(); 
     text_selected = sel.text; 
     } 

    // others browsers 
    else if (text_entry.selectionStart != undefined) { 
     var selection_pos_start = text_entry.selectionStart; 
     var selection_pos_end = text_entry.selectionEnd; 
     text_selected = text_entry.value.substring(selection_pos_start, selection_pos_end); 
     selection_prefix = text_entry.value.substring(0, selection_pos_start); 
     selection_sufix = text_entry.value.substring(selection_pos_end, text_entry.length); 
     } 

    text_entry.value = selection_prefix + '<a href="' + text_selected + '">' + text_selected + '</a>' + selection_sufix; 
    }

я заменить все записи text_entry с HTML гиперссылкой код. Но я не нашел, как легко заменить text_selected с <a href="text_selected">text_selected</a>

Окончательная HTML:

<textarea id="my_input" cols="32" rows="16" textToDisplay>Some text with https://www.google.pl/?gws_rd=ssl for simple WYSIWYG function</textarea> 
<input type="submit" value="[url]" onclick="text_to_hyperlink('my_input')"/>

источник

2016-12-14 11:34:39 Dentarius

Сделать активные гиперссылки для выделенного текста в текстовом поле HTML с помощью java-скрипта

ответ

Смежные вопросы