Manipolare il testo selezionato di una textarea via Javascript

Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302

Manipolare il testo interno ad una textarea è un’attività che è richiesta nel momento in cui si realizzano dei editor testuali che offrono la possibilità all’utente di aggiungere dei tag particolari o di svolgere alcune attività ripetitive. Un esempio può essere il form di inserimento dei post in un forum con i pulsanti per aggiungere il BBCode per il grassetto, il corsivo, ecc…

Una prima funzione utile è quella che permette di ottenere il testo selezionato dall’utente all’interno di una textarea. Non esiste una funzione universale che effettua questa operazione, ma queste poche righe di codice svolgono in modo eccellente il compito:

function textarea_selected_text(obj) {
  if (document.selection) { // Internet Explorer
    obj.focus();
    return document.selection.createRange().text;
  } else if (obj.selectionStart || obj.selectionStart == '0') { // Others
    return obj.value.substring(obj.selectionStart, obj.selectionEnd);
  } else {
    return obj.value; // Fallback
  }
}

Il parametro obj passato alla funzione è un riferimento all’oggetto textarea di cui si vuole ottenere il testo selezionato. La funzione restituisce semplicemente una stringa contenente il testo.

Un’altra funzione che potrebbe tornare molto utile è quella che permette l’inserimento del testo prima e/o dopo la selezione.

function textarea_wrap_text(obj, str_pre, str_post) {
  if (document.selection) { // Internet Explorer
    obj.focus();
    sel = document.selection.createRange();
    sel.text = str_pre + sel.text + str_post;
  } else if (obj.selectionStart || obj.selectionStart == '0') { // Others
    var pos_1 = obj.selectionStart;
    var pos_2 = obj.selectionEnd;
    obj.value = obj.value.substring(0, pos_1)
                + str_pre
                + obj.value.substring(pos_1, pos_2)
                + str_post
                + obj.value.substring(pos_2, obj.value.length);
  } else { // Fallback
    obj.value += str_pre + str_post;
  }
}

La funzione prende di nuovo il riferimento alla textarea in questione, una stringa str_pre che deve essere posizionata prima della selezione e una stringa str_post che deve essere posizionata dopo. Le stringhe possono essere anche vuote. Se la selezione è vuota allora str_pre e str_post vengono inserite nella posizione del cursore, senza nessun testo che le divida.

Infine potrebbe esserci la necessità di sostituire il testo selezionato. Allora tornerà utile questa terza funzione.

function textarea_replace_text(obj, str) {
  if (document.selection) { // Internet Explorer
    obj.focus();
    sel = document.selection.createRange();
    sel.text = str;
  } else if (obj.selectionStart || obj.selectionStart == '0') { // Others
    var startPos = obj.selectionStart;
    var endPos = obj.selectionEnd;
    obj.value = obj.value.substring(0, startPos) + str + obj.value.substring(endPos, obj.value.length);
  } else { // Fallback
    obj.value += str;
  }
}

La funzione prende, oltre al solito riferimento alla textarea, la stringa str che deve sostituire la selezione.files/files/