web-dev-qa-db-fra.com

Obtenir le texte pur sans élément HTML en javascript?

J'ai le bouton 1 et du texte dans mon code HTML comme suit:

function get_content(){
   // I don't know how to do in here!!!
}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

Lorsque l'utilisateur clique sur le bouton, le contenu du <p id='txt'> devient le suivant.

Résultat attendu:

<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>

Quelqu'un peut-il m'aider à écrire la fonction javascript? Je vous remercie.

javascripthtml
99
John

[2017-07-25] étant donné que cela reste la réponse acceptée, bien que ce soit une solution très compliquée, j'y incorpore le code de Gabi , laissant le mien pour servir d'exemple.

<style>
.A {background: blue;}
.B {font-style: italic;}
.C {font-weight: bold;}
</style>

<script>
// my hacky approach:
function get_content() {
     var html = document.getElementById("txt").innerHTML;
     document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
    var element = document.getElementById('txt');
    element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
    txt.innerHTML = txt.innerText || txt.textContent;
}
</script>

<input type="button" onclick="get_content()" value="Get Content (bad)"/>
<input type="button" onclick="gabi_content()" value="Get Content (good)"/>
<input type="button" onclick="txt_content()" value="Get Content (shortest)"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
59
jcomeau_ictx

Vous pouvez utiliser ceci:

var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;

En fonction de vos besoins, vous pouvez utiliser element.innerText ou element.textContent. Ils diffèrent à bien des égards. innerText essaie de faire une approximation de ce qui se produirait si vous sélectionniez ce que vous voyez (rendu au format HTML) et le copiez dans le presse-papiers, tandis que textContent sort de sorte à supprimer les balises html et vous donne ce qui reste.

innerText est également compatible avec les anciens navigateurs IE (venus de là).

181
Gabi Purcaru

Si vous pouvez utiliser jquery, alors c'est simple

$("#txt").text()
22
Sarath

Cette réponse fonctionnera pour obtenir uniquement le texte de tout élément HTML.

Ce premier paramètre "noeud" est l'élément à partir duquel se trouve le texte. Le second paramètre est facultatif et si true ajoute un espace entre le texte contenu dans les éléments si aucun espace n’y aurait autrement.

function getTextFromNode(node, addSpaces) {
    var i, result, text, child;
    result = '';
    for (i = 0; i < node.childNodes.length; i++) {
        child = node.childNodes[i];
        text = null;
        if (child.nodeType === 1) {
            text = getTextFromNode(child, addSpaces);
        } else if (child.nodeType === 3) {
            text = child.nodeValue;
        }
        if (text) {
            if (addSpaces && /\S$/.test(result) && /^\S/.test(text)) text = ' ' + text;
            result += text;
        }
    }
    return result;
}
7
James

En fonction de vos besoins, vous pouvez utiliser element.innerText ou element.textContent. Ils diffèrent à bien des égards. innerText essaie de faire une approximation de ce qui se produirait si vous sélectionniez ce que vous voyez (rendu au format HTML) et le copiez dans le presse-papiers, tandis que textContent sort de sorte à supprimer les balises html et vous donne ce qui reste.

innerTextn'est plus seulement utilisé pour IE , et il est pris en charge par tous les principaux navigateurs . Bien sûr, contrairement à textContent, il est compatible avec les anciens navigateurs IE (car ils l'ont conçu).

Exemple complet (de réponse de Gabi ):

var element = document.getElementById('txt');
var text = element.innerText || element.textContent; // or element.textContent || element.innerText
element.innerHTML = text;
1
Matthias

Cela fonctionne pour moi compilé sur la base de ce qui a été dit ici avec une norme plus moderne. Cela fonctionne mieux pour plusieurs regards. 

let element = document.querySelectorAll('.myClass')
  element.forEach(item => {
    console.log(item.innerHTML = item.innerText || item.textContent)
  })
0
Issac Gable

Cela devrait fonctionner:

function get_content(){
   var p = document.getElementById("txt");
   var spans = p.getElementsByTagName("span");
   var text = '';
   for (var i = 0; i < spans.length; i++){
       text += spans[i].innerHTML;
   }

   p.innerHTML = text;
}

Essayez ce violon: http://jsfiddle.net/7gnyc/2/

0
Igor Dymov
function get_content(){
 var returnInnerHTML = document.getElementById('A').innerHTML + document.getElementById('B').innerHTML + document.getElementById('A').innerHTML;
 document.getElementById('txt').innerHTML = returnInnerHTML;
}

Ça devrait le faire.

0
user827080

Essayez (version courte de Gabi réponse idée)

function get_content() {
   txt.innerHTML = txt.textContent;
}

function get_content() {
   txt.innerHTML = txt.textContent ;
}
span { background: #fbb}
<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
0
Kamil Kiełczewski