La funzione execCommand() in JavaScript

La funzione execCommand() in JavaScript è uno strumento per eseguire comandi di modifica (es. come copia, incolla, taglia, ecc.) sul contenuto di un documento web.

execCommand(command)

Tra le parentesi tonde devo indicare il comando che voglio eseguire.

Va anche detto che ormai è una funzione obsoleta e in disuso, seppure ancora funzionante,

Questa funzione è stata deprecata, il che significa che non è consigliato il suo utilizzo in nuovi progetti e potrebbe non essere supportata in futuro. Inoltre, potrebbe non funzionare su tutti i browser moderni e può sollevare problemi di sicurezza e privacy, poiché interagisce con la clipboard del sistema. Tuttavia, per scopi didattici o di manutenzione di vecchi codici, può essere utile comprenderne il funzionamento e sapere come funziona.

Esempio pratico

Ho un documento html con un paragrafo all'interno.

<html>
<body>
<p id="paragrafo1">Hello World!</p>
</body>
</html>

Voglio inserire una stringa nel contenuto del paragrafo con id paragrafo1.

Per farlo scrivo un codice javascript usando la funzione execCommand()

<html>
<body>
<p id="paragrafo1" contenteditable="true"> World!</p>
<script>
// l'elemento selezionato deve essere modificabile
var paragrafo = document.getElementById("paragrafo1");
paragrafo.focus();
// Utilizzo execCommand per aggiungere il testo
document.execCommand('insertText', false, "Hello");
</script>
</body>
</html>

Lo script seleziona il paragrafo <p> con id=paragrafo1 e aggiunge il testo all'interno.

Il risultato sullo schermo è la scritta

Hello World!

In conclusione, essendo una funzione deprecata, è meglio optare per alternative più moderne e sicure.

E così via.