Javascript：テキスト領域のハイライトされた文字列を置き換えますか？

Question

私はtextareaの文字列/テキストを高めようとしていて、それをカスタムタグの周りにラップしています。

ハイライトされたテキストを簡単に取得できます。タグの周りをラップしてアラート（）することはできますが、テキストエリア内で置き換えることはできません。

これは私の作業FIDDLE（https://jsfiddle.net/dftLu6ax/）

であり、これは私のJavascriptを/ jQueryのコードです：

$('#showSelected').on('click', function(){ 

function getInputSelection(elem){ 
if(typeof elem != "undefined"){ 
    s=elem[0].selectionStart; 
    e=elem[0].selectionEnd; 
    return elem.val().substring(s, e); 
}else{ 
    return ''; 
} 
} 
var text = getInputSelection($("#details")); 

var link = prompt("Please enter your URL", ""); 
    if (link != null) { 

    var str = document.getElementById("details").value; 
    var res = str.replace(text, "<a onclick='somevariable goes here' href=''>"+text+"</a>"); 

    alert(res); 

     /*document.getElementById("demo").innerHTML = 
     "Hello " + person + "! How are you today?";*/ 
    } 

}); 

と私のシンプルなHTML：

<input type="button" id="showSelected" value="Insert Link"> 


    <textarea class="form-control" rows="5" id="details" name="details"></textarea> 

は、誰かがこの上でアドバイスしてもらえます？

ありがとうございます。

Answer 1

使用$("#details").val(res)その

$('#showSelected').on('click', function(){ 

function getInputSelection(elem){ 
if(typeof elem != "undefined"){ 
    s=elem[0].selectionStart; 
    e=elem[0].selectionEnd; 
    return elem.val().substring(s, e); 
}else{ 
    return ''; 
} 
} 
var text = getInputSelection($("#details")); 

var link = prompt("Please enter your URL", ""); 
    if (link != null) { 

    var str = document.getElementById("details").value; 
    var res = str.replace(text, "<a onclick='somevariable goes here' href=''>"+text+"</a>"); 
$("#details").val(res); 
     /*document.getElementById("demo").innerHTML = 
     "Hello " + person + "! How are you today?";*/ 
    } 

}); 

フィドルについて：https://jsfiddle.net/dftLu6ax/3/

Answer 2

あなたがテキストエリア内のテキストを取得しているので：

document.getElementById("details").value 

あなたは、更新された値を設定するために同じを使用することがあります。

function getInputSelection(elem){ 
 
    if(typeof elem != "undefined"){ 
 
    s=elem[0].selectionStart; 
 
    e=elem[0].selectionEnd; 
 
    return elem.val().substring(s, e); 
 
    }else{ 
 
    return ''; 
 
    } 
 
} 
 
$(function() { 
 
    $('#showSelected').on('click', function(){ 
 
    var text = getInputSelection($("#details")); 
 
    var link = prompt("Please enter your URL", ""); 
 
    if (link != null) { 
 
     var str = document.getElementById("details").value; 
 
     var res = str.replace(text, "<a onclick='somevariable goes here' href=''>"+text+"</a>"); 
 
     
 
     //THIS LINE 
 
     document.getElementById("details").value = res; 
 
    } 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="button" id="showSelected" value="Insert Link"> 
 

 
<textarea class="form-control" rows="5" id="details" name="details"></textarea>