Javascript：替换文本区域中突出显示的字符串？

Question

我试图高亮textarea中的一个字符串/文本，然后将其包裹在自定义标记周围。

我现在可以很容易地得到突出显示的文本，并且我可以将它包裹在标记周围并警告（）它，但我无法在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>