Extrahieren Sie den text aus HTML-string mit JavaScript

Ich versuche, das innere text - /HTML-string, mit Hilfe einer JS-Funktion(die Zeichenfolge als ein argument übergeben wird). Hier ist der code:

function extractContent(value) {
    var content_holder = "";

    for(var i=0;i<value.length;i++) {
        if(value.charAt(i) === '>') {
            continue;
            while(value.charAt(i) != '<') {
                content_holder += value.charAt(i);
            }
        }

    }
    console.log(content_holder);
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");

Das problem ist, dass gar nichts geht auf der Konsole ausgegeben(content_holder bleibt leer). Ich denke, das problem wird verursacht, durch den "= = = " - operator..

InformationsquelleAutor Toshkuuu | 2015-03-06
  1. 42

    Ein element erstellen, speichern, den HTML-Code in es, und seine textContent:

    JS:

    function extractContent(s) {
  var span = document.createElement('span');
  span.innerHTML = s;
  return span.textContent || span.innerText;
};
    
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));

    Hier eine version, die Ihnen erlaubt, Leerzeichen zwischen Knoten, obwohl Sie würde wahrscheinlich wollen, dass block-level-Elemente nur:

    JS:

    function extractContent(s, space) {
  var span= document.createElement('span');
  span.innerHTML= s;
  if(space) {
    var children= span.querySelectorAll('*');
    for(var i = 0 ; i < children.length ; i++) {
      if(children[i].textContent)
        children[i].textContent+= ' ';
      else
        children[i].innerText+= ' ';
    }
  }
  return [span.textContent || span.innerText].toString().replace(/+/g,' ');
};
    
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>"));

console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>",true));

    • Ausgänge HelloW3C - wirklich das, was der OP wollte? Nicht Hello W3C?
    • Nein, Leerzeichen sind nicht erforderlich 🙂 Sorry für die nicht es zu erwähnen!
    • Hinzugefügt eine version, die kann hinzufügen von Leerzeichen zwischen den Knoten.
    • delete span leistet nichts.
    • danke, ich war mir nicht sicher, dass. Bearbeitet.
    InformationsquelleAutor Rick Hitchcock
  2. 17

    Einer Zeile (genauer gesagt, eine Anweisung) version:

    function extractContent(html) {

    return (new DOMParser).parseFromString(html, "text/html") . 
        documentElement . textContent;

}
    • nette Antwort +1, aber was ist der Unterschied zwischen Ihrer Antwort und Rick Hitchcock Antwort
    • ist "experimentelle Technologie", aber wahrscheinlich Hinzugefügt, um die spec. Deren HTML-Unterstützung funktioniert in IE10+. Meine ursprüngliche Antwort arbeitete in IE9+, aber ich habe jetzt aktualisiert auf die Unterstützung des IE8.
    • DOMParser jetzt hat eine Breite Unterstützung finden Sie unter caniuse.com/#search=domparser
    • hofften, dies würde die Arbeit auf nodejs-aber es tut. endete mit npmjs.com/package/html2plaintext
    • Können Wir verwenden diese Methode für das extrahieren der Inhalte von id, wie: Dokument.getElementById ?
    InformationsquelleAutor
  3. 2

    verwenden Sie diese regax zum entfernen html-tags und speichern nur den text in html -

    es zeigt die HelloW3c nur check it

    var content_holder = value.replace(/<(?:.|\n)*?>/gm, '');
    • Nicht manipulieren HTML mit regexps.
    • bitte geben Sie mir einen Grund, bitte?
    • stackoverflow.com/questions/1732348/...
    • Wenn Sie verwenden, regexp, dann eine einfachere version wäre /<[\s\S]*?>/ oder /<[^]*?>/. Ihre m fahne leistet nichts; es bezieht sich auf das Verhalten von ^ und $.
    InformationsquelleAutor Ahmer
  4. 2

    Versuchen Sie Dies:-

    HTML:

    <!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function extractContent(value){
        var div = document.createElement('div')
        div.innerHTML=value;
        var text= div.textContent;            
        return text;
}
window.onload=function()
{
   alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
};
</script>
</body>
</html>

    • Hast du dies testen? Es nicht zu extrahieren, die "W3C", wie es sollte.
    • Bitte versuchen Sie Ihre Lösung mit dem string Hello, <p>Buggy<i>World</i></p>.
    • danke, veränderte sich meine Antwort.
    InformationsquelleAutor Sharique Ansari
  5. 2

    textContext ist eine sehr gute Methode für die Erreichung der gewünschten Ergebnisse, aber manchmal wollen wir nicht zu laden-DOM. So einfach Abhilfe werden folgende reguläre Ausdruck:

    let htmlString = "<p>Hello</p><a href='http://w3c.org'>W3C</a>"
let plainText = htmlString.replace(/<[^>]+>/g, '');
    • Ich weiß, das ist eine sehr alte Bemerkung, aber könntest du bitte erklären Sie die Bedeutung des Ausdrucks /<[^>]+>/g ? Ich habe Schwierigkeiten zu verstehen, was jedes einzelne Zeichen bedeutet.
    InformationsquelleAutor Mubeen Khan
  6. -1

    Sie konnte vorübergehend, schreiben Sie es auf ein block-level-Elements, das positioniert ist, von der Seite .. einige Sache wie diese:

    HTML:

    <div id="tmp" style="position:absolute;top:-400px;left:-400px;">
</div>

    JavaScript:

    <script type="text/javascript">
function extractContent(value){
        var div=document.getElementById('tmp');
        div.innerHTML=value;
        console.log(div.children[0].innerHTML);//console out p
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
</script>
    • Richtige Ansatz, aber Sie brauchen nicht ein element in den DOM, um dies zu tun. Erstellen Sie einfach ein element mit var div = document.createElement('div') und gehen von dort aus.
    • Auch dies schlägt fehl mit verschachtelten HTML-Elementen, wie <p>Hello<i>Bob</i></p><a>...</a>. Es bleibt der markup innerhalb des p element.
    • guter Punkt
    InformationsquelleAutor Adam MacDonald
  7. -3

    müssen Sie array für Werte

      function extractContent(value) {
var content_holder = new Array();

for(var i=0;i<value.length;i++) {
    if(value.charAt(i) === '>') {
        continue;
        while(value.charAt(i) != '<') {
            content_holder.push(value.charAt(i));
            console.log(content_holder[i]);
        }
    }
}
}extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
    • Sie nicht brauchen ein array, wenn Sie möchten, dass die Ergebnisse zu einem string, sondern ein array ermöglicht dem Benutzer den Zugriff auf alle Ergebnis/Wert.
    • Sie haben nicht behoben, die grundlegende Logik-Fehler im OP-code. Hast du dies testen?
    • Ich werde zu erraten "nicht"
    InformationsquelleAutor Dane
Schreibe einen Kommentar