Comment puis-je intercepter et extraire du texte brut à partir de données collées en JavaScript dans les navigateurs ?

Détection et récupération de données collées en JavaScript (cross-browser)

Les applications Web doivent souvent capturer et prétraiter les données avant qu'elles ne soient collé dans un éditeur de texte. Cela peut impliquer de supprimer des éléments spécifiques, tels que des balises HTML, tout en préservant le formatage existant. Cependant, les techniques traditionnelles de nettoyage après collage peuvent perturber le formatage du texte précédent.

Pour relever ce défi, explorons une solution qui utilise les API de navigateur modernes pour intercepter les événements de collage et récupérer les données collées :

Solution n°1 : Extraction de texte brut (Firefox 22 et navigateurs modernes)

Pour les navigateurs prenant en charge le API DataTransfer (par exemple, IE9 , Firefox 22 , Chrome, Safari, Edge), l'approche suivante permet une extraction sélective du texte brut des données du presse-papiers :

function handlePaste(e) {
  var clipboardData, pastedData;

  // Stop data actually being pasted into div
  e.stopPropagation();
  e.preventDefault();

  // Get pasted data via clipboard API
  clipboardData = e.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('Text');

  // Do whatever with pasteddata
  alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

Cette solution exploite e.clipboardData.getData( 'Text') pour extraire le contenu en texte brut des données transférées lors de l'événement de collage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!