Make an active Hyperlinks for selected text in HTML textarea with java script

Question

I'm trying to prepare a Javascript function that changes the "selected text" url to fully active HTML Hyperlinks.

My HTML code is:

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

My js function:

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

But after selecting https://www.google.pl/?gws_rd=ssl and pressing submit I get empty HTML Hyperlinks. What is wrong? window.getSelection() / document.getSelection() doesn't get the selected text.

The second question is - how to get my_input_begin.value and my_input_end.value or replace only "selected" part of my <textarea> entry?

Possible duplicate of [How to get selected text from textbox control with javascript](http://stackoverflow.com/questions/275761/how-to-get-selected-text-from-textbox-control-with-javascript) — Heather Sawatsky, Dec 13 '16 at 22:53

score 2 · Answer 1 · answered Dec 14 '16 at 11:34

I've sorted it out. The final Javascript code is:

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

I replace all entry text_entry with HTML hyperlink code. But I didn't find how to easy replace the text_selected with <a href="text_selected">text_selected</a>

Final 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')"/>

score -1 · Answer 2 · answered Dec 13 '16 at 23:15

Try this code:

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

Click on the textArea first to get the text selected and then click on [to url] button.

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

Note: Every time you add new text in the textArea and click on the [to url] button a new hyper link will be generated.Also i have used jquery library to select the so you have to attach it on the page.

Hope it works fine ☻

If you are copying a code from somewhere, please add the source link as copyright. You even did not change the variable names in [this function](http://stackoverflow.com/a/275825/1908331) although you have added your code to the end of this function. But please include your source which you got your idea from to your post — EhsanT, Dec 13 '16 at 23:27

Make an active Hyperlinks for selected text in HTML textarea with java script

2 Answers2