我正在尝试在textarea中标记字符串/文本,然后将其包装在自定义标签周围。

现在,我可以轻松获得突出显示的文本,并且可以将其包装在标签周围并用alert()对其进行包装,但是我无法在文本区域内替换它。

这是我的工作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>


有人可以为此提供建议吗?

提前致谢。

最佳答案

因为您可以通过以下方式在文本区域内获取文本:

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>

07-24 09:47
查看更多