Javascript, action on a selected text

Question

People would like to know how to do an action on a selected text in the textarea, for example I selected the word 'hi' and when I click a button with Onlick, change the text to 'bye''.

I await the answer, because I am all day looking and do not find. I thank you for your attention.

Answer 1

You can use the attributes selectionStart and selectionEnd of textarea to determine which section of the same is selected. Then just replace this section in its value (value).

Example (takes the value until the beginning of the selection, joins with the string to be inserted, and closes with the value after the end of the selection):

document.querySelector("button").onclick = function() {
  var ta = document.querySelector("textarea");
  ta.value = ta.value.substring(0, ta.selectionStart) +
             "tchau" +
             ta.value.substring(ta.selectionEnd);
}

<textarea>oi, tudo bem?</textarea>
<button>Trocar</button>

Answer 2

There’s an example using pure javascript:

function selecionaTexto() {
  var textArea = document.getElementById('texto');
  var selectedText;

  if (textArea.selectionStart != undefined) { //Se tiver algo selecionado
    var startPos = textArea.selectionStart; //Inicio da selecao
    var endPos   = textArea.selectionEnd;     //Fim da selecao
    selectedText = textArea.value.substring(startPos, endPos);
    if (selectedText == "Oi") { //Se selecao foir "Oi"
      var novoTexto = textArea.value.substring(0, startPos) +
                      "Tchau" + textArea.value.substring(endPos);
      textArea.value = novoTexto;
    }
  }
}

<textarea id="texto">Oi senhor usuário</textarea>
</br>
<button id="botao" onclick="selecionaTexto();">Trocar</button>