CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefox
Black
Black

Reputation: 20212

Replace selected text from input fields on button click

I simply try to replace the selected text from an input field e.g from a textarea, with another text. E.g. if i select a part of the text inside the input field and click the Button CENTER, then the selected text should be wrapped in <center></center>.

I found this "solution" from 2009 which seems to be outdated, I tried it with Chrome and Firefox and I get the info that my browser is not supported.

Is there another way to achieve this? It should work at least with Firefox and Chrome.

Textarea

enter image description here

Upvotes: 12

Views: 7047

Answers (3)

selim
selim

Reputation: 1

    // hope this would be usefull
    // i used these codes for auto completing the texts in textarea.
    // other methods change all matching items before the selected text
    // but this affects only the text where caret on.
    // at first, i divided textarea.value into 3 pieces. these are ;
    // p1; until the 'searched' item, p2 after 'searched' item
    // and pa = new item that will replaced with 'searched' item
    // then, i combined them together again.

    var tea = document.getElementById(targetTextArea);

    caretPosition = tea.selectionStart - ara.length; //ara=searched item
    p1 = tea.value.substring(0,caretPosition);
        console.log('p1 text : ' + p1);
    p2 = tea.value.substring(caretPosition+ara.length,tea.value.length);
        console.log('p2 text : ' + p2);
    pa = yeni;  //new item
        console.log('pa text : ' + pa);

    tea.value = p1 + pa + p2;

    tea.selectionStart = caretPosition + yeni.length;
    tea.selectionEnd = caretPosition + yeni.length;

    tea.focus();

Upvotes: 0

LkPark
LkPark

Reputation: 566

Here is one simple example

$(function() {
  $('textarea').select(function(event) {
    var elem = $(this);
    var start = elem.prop("selectionStart");
    var end = elem.prop("selectionEnd");
    
    var prefixStr = elem.text().substring(0, start);
    var sufixStr = elem.text().substring(end, elem.text().length);
    var selectedStr = elem.text().substring(start, end);
    
    function transform(str) {
      return '<center>' + str + '</center>'
    }
    
    elem.text(prefixStr + transform(selectedStr) + sufixStr);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</textarea>

Upvotes: 3

Timvr01
Timvr01

Reputation: 496

Try this:

function getSel() // javascript
{
console.log("test");

    // obtain the object reference for the textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    //obtain all Text
    var allText = txtarea.value;

    // obtain the selected text
    var sel = allText.substring(start, finish);
    //append te text;
    var newText=allText.substring(0, start)+"<center>"+sel+"</center>"+allText.substring(finish, allText.length);

    console.log(newText);

    txtarea.value=newText;
}

https://jsfiddle.net/qpw1eemr/1/

Upvotes: 18

Related Questions