Maison > interface Web > js tutoriel > Comment puis-je extraire du texte pur à partir d'éléments HTML à l'aide de JavaScript ?

Comment puis-je extraire du texte pur à partir d'éléments HTML à l'aide de JavaScript ?

Susan Sarandon
Libérer: 2024-10-31 18:48:02
original
623 Les gens l'ont consulté

How can I extract pure text from HTML elements using JavaScript?

Comment extraire du texte pur à partir d'éléments HTML à l'aide de JavaScript

Lorsque vous traitez des éléments HTML contenant à la fois du texte et du balisage, il est souvent souhaitable de obtenir le contenu du texte sans éléments HTML. Ceci peut être réalisé en utilisant JavaScript, comme démontré dans l'exemple suivant.

Dans l'extrait HTML fourni, nous avons un bouton avec un événement onclick qui déclenche une fonction JavaScript, chargée d'extraire le contenu du texte d'un < ;p> et en supprimant les éléments HTML.

Résultat attendu :

Lorsque l'utilisateur clique sur le bouton, les éléments HTML dans l'élément

sera supprimé, ne laissant que le contenu textuel pur.

Fonction JavaScript :

La fonction JavaScript suivante utilise la propriété innerText pour extraire le contenu textuel de l'élément < p> element :

<code class="javascript">function get_content() {
  // Retrieve the <p> element by its ID
  var element = document.getElementById('txt');

  // Extract the text content using innerText
  var text = element.innerText || element.textContent;

  // Update the HTML content of the <p> element with the extracted text
  element.innerHTML = text;
}</code>
Copier après la connexion

Explication :

  • La propriété innerText renvoie le contenu textuel d'un élément, à l'exclusion de tout élément HTML qu'il contient.
  • Si l'élément n'a pas de propriété innerText (anciens navigateurs), la propriété textContent peut être utilisée à la place.
  • Enfin, le contenu HTML de l'élément

    L'élément est mis à jour avec le texte extrait, supprimant ainsi les éléments HTML.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal