使用Java脚本为HTML文本区域中的选定文本创建活动的超链接

Question

I'm trying to prepare a Javascript function that changes the "selected text" url to fully active HTML Hyperlinks. 我正在尝试准备一个Javascript函数，将“选定的文本” URL更改为完全活动的HTML超链接。

My HTML code is: 我的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>

My js function: 我的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>

But after selecting https://www.google.pl/?gws_rd=ssl and pressing submit I get empty HTML Hyperlinks. 但是在选择https://www.google.pl/?gws_rd=ssl并按提交后，我得到了空的HTML超链接。 What is wrong? 怎么了？ window.getSelection() / document.getSelection() doesn't get the selected text. window.getSelection() / document.getSelection()无法获取所选文本。

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? 第二个问题是-如何获取my_input_begin.value和my_input_end.value或仅替换<textarea>条目的“选定”部分？

Answer 1

I've sorted it out. 我已经整理好了。 The final Javascript code is: 最终的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;
    }

I replace all entry text_entry with HTML hyperlink code. 我将所有条目text_entry替换为HTML超链接代码。 But I didn't find how to easy replace the text_selected with <a href="text_selected">text_selected</a> 但是我没有找到如何轻松地用<a href="text_selected">text_selected</a>替换text_selected 。

Final HTML: 最终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')"/>

Answer 2

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. 首先单击textArea以选择文本，然后单击[to 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);
    }

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. 注意：每次在textArea中添加新文本并单击[to url]按钮时，都会生成一个新的超级链接。此外，我还使用jquery库进行选择，因此您必须将其附加在页面上。

Hope it works fine ☻ 希望它能正常工作☻

使用Java脚本为HTML文本区域中的选定文本创建活动的超链接

问题描述

2 个解决方案

解决方案1
0 2016-12-14 11:34:39

解决方案2
-1 2016-12-13 23:15:30

使用Java脚本为HTML文本区域中的选定文本创建活动的超链接

问题描述

2 个解决方案

解决方案1 0 2016-12-14 11:34:39

解决方案2 -1 2016-12-13 23:15:30

解决方案1
0 2016-12-14 11:34:39

解决方案2
-1 2016-12-13 23:15:30