Comment obtenir uniquement le texte rendu d'un nœud de texte?

Question

Je crée une petite extension web qui modifie une page web en fonction du texte. A titre d'exemple de mon problème est un code qui a ici un marcheur arbre saisit tous les nœuds de texte sur une page:

var treeWalker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_TEXT, 
    { acceptNode:() => {return NodeFilter.FILTER_ACCEPT;} }, 
    false 
); 

while(treeWalker.nextNode()) { 
    let x = treeWalker.currentNode.data; 
    //do something with x 
} 

Malheureusement, x aura tout le texte dans le nœud, même si elle n'est pas représenté sur la page Web. Ce que je veux, c'est quelque chose comme treeWalker.currentNode.innerText, mais qui n'est pas défini pour les nœuds de texte. Est-ce que quelqu'un sait comment obtenir seulement le texte montré à l'utilisateur pour un noeud de texte?

Exemple: Si une page Web a le nœud avec le code HTML suivant:

<div> 
    <script type="text/x-config"> 
    { 
     "setObject": -1 
    } 
    </script> 
    <span>Quiz</span> 

avec CSS associée:

script { 
    display: none; 
} 

Ensuite, le contenu du texte du nœud texte respectif (moins d'espaces supplémentaires et la ligne breaks) est renvoyé sous la forme "{" setObject ": -1} Quiz". Cependant, la seule chose qui est rendue à l'utilisateur est "Quiz". Étant donné le nœud de texte respectif, comment obtenir uniquement le texte rendu?

Answer 1

Je suppose que nous avons un problème.

Si vous utilisez un nouveau navigateur, vous devriez pouvoir utiliser innerText, mais si ce n'est pas le cas, vous devez utiliser textContent. Le problème de textContent est qu'il obtient le contenu de tous les éléments, y compris et et textContent n'est pas conscient du style afin qu'il retourne des événements cachés.

Je suppose que la voie à suivre est de remplacer le filtre par NodeFilter.SHOW_ELEMENT et obtenir le Element.innerHTML.

Donc, essayez-le:

var treeWalker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_ELEMENT, 
    { acceptNode: (node) => { return NodeFilter.FILTER_ACCEPT;} }, 
false 
); 

while(treeWalker.nextNode()) { 
    let x = treeWalker.currentNode.innerHTML; 
    //do something with x 
}