使用java腳本爲HTML textarea中的選定文本創建活動超鏈接

我正在嘗試準備一個將「選定文本」URL更改爲完全活動HTML超鏈接的Javascript函數。使用java腳本爲HTML textarea中的選定文本創建活動超鏈接

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

試試這個代碼：上率先拿到選定文本textarea的

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

注意：每次你在textarea的添加新的文本，然後點擊[URL來]按鈕，一個新的超鏈接將generated.Also我已經使用jQuery庫來選擇，所以你必須將其附加在頁面上。

希望它工作正常☻

來源

2016-12-13 23:15:30 ArbaazAJ

如果您從某處複製代碼，請將源代碼鏈接添加爲版權。您甚至沒有更改[this function]（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; 
    }

我替換HTML超鏈接的代碼的所有入口text_entry。但我沒有找到如何輕鬆更換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

使用java腳本爲HTML textarea中的選定文本創建活動超鏈接

回答

相關問題