[JS] getSelection (o selezione in generale) da sottrarre ad una stringa

Lo so, il titolo non è dei migliori... è un po complicato da spiegare ma ci provo...
Ho il seguente problema:

Prendo da un determinato documento una selezione di testo (con tutti i metodi possibili, se non funziona uno usa l'altro).

Vorrei che la parte di testo selezionata venga sottratta dalla stringa di testo più grande. Es.

se c'è come testo pappagallo e viene selezionata la parte appa, vorrei che mi restituisse solo pgallo (pappagallo, meno appa = pgallo).

La parte per prendere la selezione l'ho fatta, mi manca solo questa "sottrazione"....

P.S. Qua mi aspetto anche la risposta di hera...
P.P.S. Da quanto tempo non postavo qua per richiedere un aiuto...

Potresti usare il metodo substring per prendere una parte del testo oppure il metodo replace con cui potresti modificare il pezzo di stringa da togliere con la stringa vuota.
Per maggiori informazioni leggi qui.

Ma non posso racuperare l'inizio e la fine della selezione con tutti i browser (a quanto ne so) per substring, replace devo provare...

EDIT: se uso replace se mi selezionano in pappagallo la seconda a soltanto, mi sostituirà la prima e non ho modo di verificare correttamente... al contrario sarebbe utile substring, ma dovrei poter recuperare inizio e fine della selezione con tutti i browsers! Io per prendere la selezione utilizzo document.selection, document.getSelection() e window.selection...

P.S. Funcool, ma non sei più moderatore? :shock:

Allora, ci avevo sbattuto la testa due anni fa per un editor html.
Mi ricordo che erano rogne... e infatti da allora non ho più voluto aver a che fare con le Selection.. per carità..

e di certo con le Selection non c'è da aspettarsi un unico codice cross-browser ma tanti tentativi.
Io avevo gestito:
document.selection (che tra l'altro prende QUALSIASI selezione non solo di un'area di testo come serviva a me ma anche nel document body.. a te non ho capito bene magari aggiungi dettagli, parli di "documento"...).

in questo caso dovrebbe bastarti:

Codice:

---

document.selection.createRange().text = '';

---

il testo contenuto nella selezione viene rimosso, sostituito con stringa vuota in questo caso. E' il tuo caso no?
Questo per IE se non ricordo male.

Nell'altro caso che se non erro supportava netscape/mozilla, ma appunto riguardava SOLO una textarea e il check per sapere se era supportato è:
if ( document.nomeform.nometextarea.setSelectionRange )

aggiungi sti dettagli per capire qual è il tuo caso: vuoi rimuoverlo dal TESTO HTML del body?? a leggere il tuo secondo msg si direbbe di sì.. quindi è inutile questo secondo pezzo di codice che lavora con textarea...

Si, si tratta di html... del body della pagina... recupero tutto il contenuto tramite innerHTML e da questo vorrei fosse tolta la parte selezionata e al suo posto aggiunta un'altra parola...

Spero di essemi ben spiegato...

EDIT: ho appena scoperto che se nel documento seleziono un'immagine e poi faccio una 'stampa a schermo' del contenuto, l'immagine non la legge selezionata =.='

Ora, l'esigenza finale ancora non l'ho ben presente (seppur un'idea di base ora c'è)..
però mi chiedevo:
hai seguito quel post dell'altra settimana dove si parlava di iframe e del designMode="on"?
eccola:
http://forum.altervista.org/showthread.php?t=54504

mi chiedevo se potrebbe venire incontro alla tua esigenza...

Si l'avevo seguita, ma non è quello che mi interessa...

Heracleum, ho provato ora anche con selectionStart rendendomi conto che funziona solo con le textarea. Altre idee?

P.S. Scusate l'UP che non è previsto per l'area, solo che editando comunque nessuno avrebbe mai letto

Io sinceramente ho esaurito le idee..
anche perché ancora non è che ho proprio il quadro completo della tua esigenza..
Per esempio potresti spiegare perché il designMode="on" non ti interessa o non fa al tuo caso..
perché secondo me è l'unica soluzione decente.
Poi se oltre questo vuoi illustrare il tuo scopo finale, ancor meglio.

Perchè il designmode on non ha alcuna possibilità per far si che venga aggiunta dopo e prima della selezione una parola.

Se nel documento viene selezionato ciao prima e dopo ciao si deve aggiungere $, per il risultato di $ciao$. Ho provato con innerHTML, tuttavia utilizzando questa strada non posso far altro che lasciare lo ciao selezionato nel documento ed aggiungere alla fine di esso $ciao$, lasciando però quello vecchio.

Non saprei come spiegarlo altrimenti... spero abbia capito

Riguardo alla comprensione del "contesto" dell'esigenza, dello scenario insomma.. sempre buio pesto:
che vuoi selezionare una parola nel body e nel range della selezione operarvi è molto chiaro dai primi messaggi.. ma per il resto zero.
Quindi capisco che è una tua idea che non ti va di esprimere pubblicamente, comprendo e non chiedo oltre (anche perché è la terza volta, eh :=D: ).

Invece non capisco perché dici:
"designmode on non ha alcuna possibilità per ..."
mi sembra una parola forte.. molto forte.. perché forse non hai ben notato che cosa ci fanno col il designmode on, anche il caffé, basta che ti guardi il mitico FCKEditor, quindi io riconsidererei.
Fai così ti scarichi fckeditor, ti guardi nei suoi .js sotto le cartelle di source (cerchi nelle cartelle per la parola contenuta "getSelection") e vedi come si comporta un lavoro fatto come si deve, io ricordo solo che ha dei js diversi per la famiglia gecko e IE.
Miglior fonte di quella non so indicarti.

Hera, dico che designMode on non può aiutarmi perchè è già on e ci ho provato in tutti i modi.
La mia idea è:
C'è francociccio che scrive nel documento CIAO.
A me serve che se mi seleziona I si crei C+I+AO, quindi si aggiunga prima e dopo la selezione un +. Il massimo che sono riuscito a fare come risultato è:
CIAO+I+... ci sto provando in tutti i modi ma non capisco.

Lo scopo di questo script è solo cercare di evidenziare la parte selezionata del testo scritto nel documento con designmode ON mettendo al posto di + tag html per modificare lo sfondo o il colore della parola...

Il problema in se è che non posso lavorare con execCommand e a meno che non esista una funzione di execCommand per inserire testo o qualcosa di molto simile, mi tocca trovare una soluzione "strana"

ciao
il rich text editor di mozilla si chiama Midas, forse può essere d'aiuto dare un'occhiata alla sua pagina su developer.mozilla.org: http://developer.mozilla.org/en/docs/Midas

Ad ogni modo, se il nodo di testo è <span>franco</span> e l'utente seleziona "ra", attraverso le proprietà anchorOffset e focusOffset dell'oggetto selection puoi trovare la distanza fra l'inizio del nodo di testo in cui è avvenuta la selezione, e rispettivamente il punto in cui la selezione è iniziata e il punto in cui è finita. Ora non dovrebbe essere difficile andare avanti.
Questo per Firefox, per gli altri sinceramente non so come funziona, queste cose le so perchè di recente ne ho tradotto le pagine sul MDC
:)

Potresti farmi un esempio? Grazie mille, non ci speravo più ormai

ehm...............boh....Te l'ho detto che so queste cose giusto perchè le ho tradotte dall'inglese su MDC....a proposito, leggiti la suddetta traduzione , o meglio ancora l'originale in inglese, magari ne tiri fuori qualcosa di buono...casomai faccio anch'io qualche prova e poi ti so dire meglio :)

[EDIT]
ciao, ho fatto un esperimento, funziona!
ora vado di fretta, l'esempio non è dei migliori, ma stasera posto qualcosa di più decente (si spera) :mrgreen:

Codice:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

  <title>Untitled</title>
<script type="text/javascript">
 function prendi(){
  var dro = document.getElementById('ci');
        var sele = window.getSelection();
        var ran = sele.getRangeAt(0);
        var scritta=ran.toString();
        var modificata=document.createElement('strong');
        modificata.appendChild(document.createTextNode(scritta));
        ran.extractContents();
        ran.insertNode(modificata);
 }
</script>

 </head>
 <body>
<p onmouseup="prendi();" id="ci">ciao mamma e ciao pabboo</p>
 </body>
</html>

---

ciaoooo

[EDIT]
boh,pare che così va già bene, io speravo di trovare un metodo per sostituire un range con un altro, invece che eliminare il contenuto e poi inserire un nodo all'inizio del range. L'unica modifica importante p "onmouseup" invece di "onclick"; ora funziona con Firefox e con Opera, e presumo anche sugli altri browser decenti. Per quanto riguarda IE,lasciamo stare :mrgreen:

Scusate ma ho dato un'occhiata a quella pagina su MDC, anche e soprattutto l'originale e ho letto questa castroneria:
«In JavaScript, when a selection object is passed to a function, a string representation of it (i.e. the selected text) is passed instead.»

Detta così crea veramente una confusione enorme ed, essendo troppo generica, dice fondamentalmente una cosa non vera.
Cioè io passo un oggetto selection ad una MIA function, per dire, e all'interno di essa mi ritrovo questo oggetto automaticamente convertito a stringa? ma quando mai? diciamo che viene chiamato il metodo toString quando -per esigenza di mostrare un messaggio (stringa) come nell'alert()- questo oggetto dovrà essere espresso come tale. Stop. Niente "conversioni automatiche che però -non vi preoccupate- lasciano l'oggetto com'era prima"... ma che è? che significa? :=D:

Ora non so se ho avuto le traveggole ma la prima volta che ho letto la versione italiana c'era appunto un commento ultra-condivisibile che metteva in guardia sulla confusione fatta nella versione originale... poi sono ritornato qualche secondo dopo e non l'ho visto più (messaggio editato o ubriaco io?) e anzi si traduce abbastanza fedelmente la minkiata originale ;)

Citazione:

---

Originalmente inviato da heracleum

Scusate ma ho dato un'occhiata a quella pagina su MDC, anche e soprattutto l'originale e ho letto questa castroneria:
«In JavaScript, when a selection object is passed to a function, a string representation of it (i.e. the selected text) is passed instead.»

---

:mrgreen: :mrgreen: :mrgreen: hai davanti a te il responsabile delle *******te italiane :mrgreen: :mrgreen:

Quando ho inizialmente tradotto la pagina, ho notato anch'io quella frase sbilenca, l'ho tradotta alla meglio ma ci ho messo il commento che hai notato anche tu(era proprio doveroso :lol: ).
Pochi minuti fa ho preso in mano la situazione e ho corretto,quindi per il momento non sei impazzito :mrgreen: . Puoi vedere la cronologia delle modifiche selezionando "history" dal menu sulla destra.
Ho pensato che se c'è stato un tentativo di chiarificare la situazione significa che se ne sente il bisogno,e così ho lasciato il pezzo anche sul wiki italiano. So che c'è scritta una banalità,ma che ci vuoi fare... Cmq hai detto che neanche così va bene? come si potrebbe correggere? merci :)

Sì avevo capito che avevi tradotto tu.
Ma in effetti di fronte a frasi del genere uno -che non sta traducendo ciecamente alla lettera- si chiede.. "ma che roba è?".
Sinceramente "correggere" implicherebbe la semplice RIMOZIONE di tutto quel "range di boiate" compreso tra la scritta "In JavaScript, when..." fino alla fine prima di Glossary.
Cioè si sta descrivendo l'oggetto Selection, ok che non si ha molto da dire ma inventarsi panzane non mi sembra il massimo :=D:
Cioè, non c'entra nulla con la selection raccontare che passando un qualsiasi oggetto alla function alert (nello specifico, ed altre che richiederanno il suo toString) questo verrà espresso in stringa.
Per togliermi ogni dubbio -sempre il "non si sa mai"- ho appunto creato una mia function :

Codice HTML:

---

<script type="text/javascript">
function testSel(sel){
        alert(sel);
        if (sel.focusNode)
                alert('focusNode = '+sel.focusNode);
}
</script>

<a href="javascript:testSel(window.getSelection())">test sel</a>

---

Se selezioni un pezzo di documento e clicchi sul link "test sel" ti mette in alert prima la selection (il suo toString) e poi il test era di richiamare una proprietà di questo oggetto selection. Se questo fosse stato -misteriosamente- convertito in stringa venendo passato come parametro alla mia function avrei visto nel primo alert il testo selezionato.. ma di certo non avrei potuto usare una proprietà dell' oggetto.

Quindi io mi inventerei qualcos'altro per riempire quella Description, qualcosa che abbia più senso :wink: e che soprattutto corrisponda a realtà.

vabè, di modificare il wiki inglese non mi va proprio, pensa che i primi tempi che mi ero iscritto su devmo ho tentato di tradurre una pagina e mi è arrivata una mail da un giapponese che si lamentava che gli avevo rovinato il suo articolo in giapponese ....
Cmq a loro parziale discolpa si può dire che sono tutti giovani volontari, qualche cavolata è comprensibile...Il corrispondente sito di microsoft è fatto da professionisti ben pagati, ci mancherebbe che saltassero fuori errori del genere su quel sito..
Cmq ci penso un po', e se è il caso lo faccio direttamente fuori quel pezzo,anche se forse per sviluppatori alle prime armi può essere d'aiuto trovare queste spiegazioncine sparse per i vari articoli...vedremo

leggere lunghezza di una seleaioneSembra funzionare, l'unico mio dubbio è: posso inserirvi del testo invece di inserirvi tag?

Ho provato a sostituire CreateElement con innerHTML ma non credo sia adatto, anche perchè non va... :lol:

EDIT: ci sono riuscito, grazie miulle veramente a tutti, dal primo all'ultimo di coloro che mi hanno aiutato e/o che hanno tentato...
Siete come al solito gentilissimi :wink: