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
Susan Sarandonoriginal
2024-10-31 18:48:02632parcourir

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>

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!

Déclaration:
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