HTML aus Text JavaScript entfernen

myString.replace(/<(?:.|\n)*?>/gm, '');

Einfachste Möglichkeit:

jQuery(html).text();

Dadurch wird der gesamte Text aus einer HTML-Zeichenfolge abgerufen. 

Ich möchte eine bearbeitete Version der genehmigten Antwort von Shog9 freigeben .

Wie Mike Samuel mit einem Kommentar anzeigte, kann diese Funktion Inline-Javascript-Codes ausführen.
Aber Shog9 ist richtig, wenn Sie sagen "Lassen Sie den Browser es für Sie tun ..." 

also .. hier meine bearbeitete Version mit DOMParser :

function strip(html){
   var doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || "";
}

hier der Code zum Testen des Inline-Javascript:

strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")

Außerdem werden keine Ressourcen für die Analyse (wie Bilder) angefordert.

strip("Just text <img src='https://assets.rbl.ms/4155638/980x.jpg'>")

Als Erweiterung der jQuery-Methode, wenn Ihre Zeichenfolge möglicherweise kein Contian-HTML enthält (z. B. wenn Sie versuchen, HTML aus einem Formularfeld zu entfernen)

jQuery(html).text();

gibt eine leere Zeichenfolge zurück, wenn kein HTML vorhanden ist

Benutzen:

jQuery('<p>' + html + '</p>').text();

stattdessen.

pdate: Wie bereits in den Kommentaren erwähnt, führt diese Lösung unter bestimmten Umständen das in html enthaltene Javascript aus, wenn der Wert von html von einem Angreifer beeinflusst werden könnte eine andere Lösung.

Konvertieren von HTML für das Senden von Nur-Text-E-Mails unter Beibehaltung der Hyperlinks (a href)

Die obige Funktion, die von hypoxide gepostet wird, funktioniert gut, aber ich wollte etwas HTML konvertieren, das in einem Web RichText-Editor erstellt wurde (zum Beispiel FCKEditor) und alle HTML-Einträge löschen, aber alle Links lassen, da ich sowohl HTML als auch Die Nur-Text-Version, die die Erstellung der richtigen Teile für eine STMP-E-Mail (sowohl HTML als auch Nur-Text) unterstützt.

Nach langem Suchen von Google kam ich und meine Kollegen dazu, die Regex-Engine in Javascript zu verwenden:

str='this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
';
str=str.replace(/<br>/gi, "\n");
str=str.replace(/<p.*>/gi, "\n");
str=str.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<(?:.|\s)*?>/g, "");

die Variable str beginnt folgendermaßen:

this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>

und dann, nachdem der Code ausgeführt wurde, sieht es so aus: -

this string has html code i want to remove
Link Number 1 -> BBC (Link->http://www.bbc.co.uk)  Link Number 1


Now back to normal text and stuff

Wie Sie sehen, wurde der gesamte HTML-Code entfernt und der Link wurde beibehalten, wobei der Hyperlink-Text noch intakt ist. Außerdem habe ich die <p>- und <br>-Tags durch \n (Newline-Zeichen) ersetzt, so dass eine Art visuelle Formatierung beibehalten wurde.

Um das Link-Format (z. B. BBC (Link->http://www.bbc.co.uk)) zu ändern, bearbeiten Sie einfach $2 (Link->$1), wobei $1 die href-URL/URI ist und $2 der Hyperlink-Text ist. Mit den Links direkt im Haupttext des Klartextes konvertieren die meisten SMTP-Mail-Clients diese, sodass der Benutzer auf sie klicken kann.

Ich hoffe, Sie finden das nützlich.

Eine Verbesserung der akzeptierten Antwort.

function strip(html)
{
   var tmp = document.implementation.createHTMLDocument("New").body;
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Auf diese Weise schadet so etwas nicht:

strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")

Firefox, Chromium und Explorer 9+ sind sicher . Opera Presto ist immer noch anfällig . Auch Bilder, die in den Zeichenfolgen erwähnt werden, werden nicht in Chromium und Firefox heruntergeladen, um http-Anforderungen zu speichern.

Dies sollte die Arbeit in jeder Javascript-Umgebung erledigen (NodeJS enthalten) .text.replace(/<[^>]+>/g, '');

Ich änderte Jibberboy2000s Antwort , um mehrere <BR />-Tagformate einzubeziehen, alles in <SCRIPT>- und <STYLE>-Tags zu entfernen, den resultierenden HTML-Code zu formatieren, indem er mehrere Zeilenumbrüche und Leerzeichen entfernt und HTML-kodierten Code in normalen Code umwandelt. Nach einigen Tests scheint es, dass Sie die meisten vollständigen Webseiten in einfachen Text umwandeln können, in dem Seitentitel und Inhalt beibehalten werden.

Im einfachen Beispiel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->

<head>

<title>This is my title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

    body {margin-top: 15px;}
    a { color: #D80C1F; font-weight:bold; text-decoration:none; }

</style>
</head>

<body>
    <center>
        This string has <i>html</i> code i want to <b>remove</b><br>
        In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to &quot;normal text&quot; and stuff using &lt;html encoding&gt;                 
    </center>
</body>
</html>

wird

Das ist mein Titel

Diese Zeichenfolge hat HTML-Code, den ich entfernen möchte

In dieser Zeile wird BBC ( http://www.bbc.co.uk ) mit Link erwähnt.

Nun zurück zu "normaler Text" und so weiter 

Die JavaScript-Funktion und die Testseite sehen folgendermaßen aus:

function convertHtmlToText() {
    var inputText = document.getElementById("input").value;
    var returnText = "" + inputText;

    //-- remove BR tags and replace them with line break
    returnText=returnText.replace(/<br>/gi, "\n");
    returnText=returnText.replace(/<br\s\/>/gi, "\n");
    returnText=returnText.replace(/<br\/>/gi, "\n");

    //-- remove P and A tags but preserve what's inside of them
    returnText=returnText.replace(/<p.*>/gi, "\n");
    returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

    //-- remove all inside SCRIPT and STYLE tags
    returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
    returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
    //-- remove all else
    returnText=returnText.replace(/<(?:.|\s)*?>/g, "");

    //-- get rid of more than 2 multiple line breaks:
    returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");

    //-- get rid of more than 2 spaces:
    returnText = returnText.replace(/ +(?= )/g,'');

    //-- get rid of html-encoded characters:
    returnText=returnText.replace(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/gi,'>');

    //-- return
    document.getElementById("output").value = returnText;
}

Es wurde mit diesem HTML verwendet:

<textarea id="input" style="width: 400px; height: 300px;"></textarea><br />
<button onclick="convertHtmlToText()">CONVERT</button><br />
<textarea id="output" style="width: 400px; height: 300px;"></textarea><br />

var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");

Dies ist eine Regex-Version, die widerstandsfähiger gegen fehlerhaftes HTML ist, wie zum Beispiel:

Nicht geschlossene Tags

Some text <img

"<", ">" innerhalb der Tag-Attribute

Some text <img alt="x > y">

Newlines

Some <a href="http://google.com">

Der Code

var html = '<br>This <img alt="a>b" \r\n src="a_b.gif" />is > \nmy<>< > <a>"text"</a'
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");

Eine andere, weniger elegante Lösung als die von Nickf oder Shog9, wäre das rekursive Durchlaufen des DOM, beginnend mit dem <body> -Tag, und jeden Textknoten anzufügen.

var bodyContent = document.getElementsByTagName('body')[0];
var result = appendTextNodes(bodyContent);

function appendTextNodes(element) {
    var text = '';

    // Loop through the childNodes of the passed in element
    for (var i = 0, len = element.childNodes.length; i < len; i++) {
        // Get a reference to the current child
        var node = element.childNodes[i];
        // Append the node's value if it's a text node
        if (node.nodeType == 3) {
            text += node.nodeValue;
        }
        // Recurse through the node's children, if there are any
        if (node.childNodes.length > 0) {
            appendTextNodes(node);
        }
    }
    // Return the final result
    return text;
}

Wenn Sie die Links und die Struktur des Inhalts beibehalten möchten (h1, h2 usw.), sollten Sie TextVersionJS auschecken. Sie können es mit jedem HTML-Code verwenden, obwohl er erstellt wurde, um eine HTML-E-Mail in einfachen Text zu konvertieren .

Die Verwendung ist sehr einfach. Zum Beispiel in node.js:

var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";

var textVersion = createTextVersion(yourHtml);

Oder im Browser mit reinen js:

<script src="textversion.js"></script>
<script>
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
</script>

Es funktioniert auch mit requir.js:

define(["textversionjs"], function(createTextVersion) {
  var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
  var textVersion = createTextVersion(yourHtml);
});

Nachdem ich alle Antworten ausprobiert hatte, hatten die meisten, wenn nicht alle, Edge-Fälle und konnten meine Bedürfnisse nicht vollständig unterstützen.

Ich begann zu erforschen, wie php es tut, und stieß auf die php.js -Lib, die die strip_tags-Methode hier repliziert: http://phpjs.org/functions/strip_tags/

function stripHTML(my_string){
    var charArr   = my_string.split(''),
        resultArr = [],
        htmlZone  = 0,
        quoteZone = 0;
    for( x=0; x < charArr.length; x++ ){
     switch( charArr[x] + htmlZone + quoteZone ){
       case "<00" : htmlZone  = 1;break;
       case ">10" : htmlZone  = 0;resultArr.Push(' ');break;
       case '"10' : quoteZone = 1;break;
       case "'10" : quoteZone = 2;break;
       case '"11' : 
       case "'12" : quoteZone = 0;break;
       default    : if(!htmlZone){ resultArr.Push(charArr[x]); }
     }
    }
    return resultArr.join('');
}

Konten für> in Attributen und <img onerror="javascript"> in neu erstellten dom-Elementen.

verwendungszweck:

clean_string = stripHTML("string with <html> in it")

demo:

https://jsfiddle.net/gaby_de_wilde/pqayphzd/

demo der Top-Antwort die schrecklichen Dinge tun:

https://jsfiddle.net/gaby_de_wilde/6f0jymL6/1/

Viele Leute haben dies bereits beantwortet, aber ich dachte, es könnte nützlich sein, die Funktion, die ich geschrieben habe, mitzuteilen, die HTML-Tags aus einer Zeichenfolge entfernt, aber ein Array von Tags enthalten kann, die nicht entfernt werden sollen. Es ist ziemlich kurz und hat gut für mich gearbeitet.

function removeTags(string, array){
  return array ? string.split("<").filter(function(val){ return f(array, val); }).map(function(val){ return f(array, val); }).join("") : string.split("<").map(function(d){ return d.split(">").pop(); }).join("");
  function f(array, value){
    return array.map(function(d){ return value.includes(d + ">"); }).indexOf(true) != -1 ? "<" + value : value.split(">")[1];
  }
}

var x = "<span><i>Hello</i> <b>world</b>!</span>";
console.log(removeTags(x)); // Hello world!
console.log(removeTags(x, ["span", "i"])); // <span><i>Hello</i> world!</span>

Ich habe einige Änderungen an dem ursprünglichen Jibber 2000-Skript vorgenommen

str = '**ANY HTML CONTENT HERE**';

str=str.replace(/<\s*br\/*>/gi, "\n");
str=str.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<\s*\/*.+?>/ig, "\n");
str=str.replace(/ {2,}/gi, " ");
str=str.replace(/\n+\s*/gi, "\n\n");

Ich denke, der einfachste Weg ist, reguläre Ausdrücke wie oben erwähnt zu verwenden. Es gibt zwar keinen Grund, einige davon zu verwenden. Versuchen:

stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");

Hier ist eine Version, die sorta @ MikeSamuels Sicherheitsbedenken anspricht: 

function strip(html)
{
   try {
       var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
       doc.documentElement.innerHTML = html;
       return doc.documentElement.textContent||doc.documentElement.innerText;
   } catch(e) {
       return "";
   }
}

Beachten Sie, es wird eine leere Zeichenfolge zurückgegeben, wenn das HTML-Markup kein gültiges XML ist (also müssen Tags geschlossen und Attribute in Anführungszeichen gesetzt werden). Dies ist nicht ideal, vermeidet jedoch das Problem des Sicherheitsausnutzungspotenzials.

Wenn für Sie kein gültiges XML-Markup erforderlich ist, können Sie Folgendes versuchen:

var doc = document.implementation.createHTMLDocument("");

aber auch aus anderen Gründen ist dies keine perfekte Lösung.

Sie können HTML-Tags mit dem Sandbox-Attribut iframe sicher entfernen.

Der Grundgedanke dabei ist, dass wir anstelle des Ausdrucks unserer Zeichenfolge den systemeigenen Parser des Browsers nutzen, indem wir den Text in ein DOM-Element einfügen und dann die Variable textContentinnerText dieses Elements abfragen.

Das am besten geeignete Element, in das Sie unseren Text einfügen möchten, ist ein Sandkasten-Iframe. Auf diese Weise können Sie die Ausführung von beliebigem Code verhindern (auch bekannt als XSS ).

Der Nachteil dieses Ansatzes ist, dass er nur in Browsern funktioniert.

Folgendes habe ich mir ausgedacht (nicht kampferprobt):

const stripHtmlTags = (() => {
  const sandbox = document.createElement("iframe");
  sandbox.sandbox = "allow-same-Origin"; // <--- This is the key
  sandbox.style.setProperty("display", "none", "important");

  // Inject the sanbox in the current document
  document.body.appendChild(sandbox);

  // Get the sandbox's context
  const sanboxContext = sandbox.contentWindow.document;

  return (untrustedString) => {
    if (typeof untrustedString !== "string") return ""; 

    // Write the untrusted string in the iframe's body
    sanboxContext.open();
    sanboxContext.write(untrustedString);
    sanboxContext.close();

    // Get the string without html
    return sanboxContext.body.textContent || sanboxContext.body.innerText || "";
  };
})();

_/Usage ( demo ):

console.log(stripHtmlTags(`<img onerror='alert("could run arbitrary JS here")' src='bogus'>XSS injection :)`));
console.log(stripHtmlTags(`<script>alert("awdawd");</` + `script>Script tag injection :)`));
console.log(stripHtmlTags(`<strong>I am bold text</strong>`));
console.log(stripHtmlTags(`<html>I'm a HTML tag</html>`));
console.log(stripHtmlTags(`<body>I'm a body tag</body>`));
console.log(stripHtmlTags(`<head>I'm a head tag</head>`));
console.log(stripHtmlTags(null));

Ich musste nur die <a>-Tags entfernen und durch den Text des Links ersetzen.

Das scheint großartig zu funktionieren.

htmlContent= htmlContent.replace(/<a.*href="(.*?)">/g, '');
htmlContent= htmlContent.replace(/<\/a>/g, '');

Mit dem folgenden Code können Sie einige HTML-Tags beibehalten und alle anderen entfernen 

function strip_tags(input, allowed) {

  allowed = (((allowed || '') + '')
    .toLowerCase()
    .match(/<[a-z][a-z0-9]*>/g) || [])
    .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)

  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
      commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;

  return input.replace(commentsAndPhpTags, '')
      .replace(tags, function($0, $1) {
          return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
      });
}

Mit jQuery können Sie es einfach mit abrufen 

$('#elementID').text()

Es ist auch möglich, den fantastischen HTML-Parser htmlparser2 pure JS zu verwenden. Hier ist eine funktionierende Demo:

var htmlparser = require('htmlparser2');

var body = '<p><div>This is </div>a <span>simple </span> <img src="test"></img>example.</p>';

var result = [];

var parser = new htmlparser.Parser({
    ontext: function(text){
        result.Push(text);
    }
}, {decodeEntities: true});

parser.write(body);
parser.end();

result.join('');

Die Ausgabe wird This is a simple example. sein.

Sehen Sie es in Aktion hier: https://tonicdev.com/jfahrenkrug/extract-text-from-html

Dies funktioniert sowohl in Knoten als auch im Browser, wenn Sie Ihre Webanwendung mit einem Tool wie Webpack packen.

einfaches 2-Zeilen-Jquery, um das HTML zu entfernen.

 var content = "<p>checking the html source&nbsp;</p><p>&nbsp;
  </p><p>with&nbsp;</p><p>all</p><p>the html&nbsp;</p><p>content</p>";

 var text = $(content).text();//It gets you the plain text
 console.log(text);//check the data in your console

 cj("#text_area_id").val(text);//set your content to text area using text_area_id

Jquery verwenden: 

function stripTags() {
    return $('<p></p>').html(textToEscape).text()
}

input element unterstützt nur einen Zeilentext :

Der Textstatus repräsentiert ein einzeiliges Textsteuerelement für den Wert des Elements.

function stripHtml(str) {
  var tmp = document.createElement('input');
  tmp.value = str;
  return tmp.value;
}

Update: das funktioniert wie erwartet

function stripHtml(str) {
  // Remove some tags
  str = str.replace(/<[^>]+>/gim, '');

  // Remove BB code
  str = str.replace(/\[(\w+)[^\]]*](.*?)\[\/\1]/g, '$2 ');

  // Remove html and line breaks
  const div = document.createElement('div');
  div.innerHTML = str;

  const input = document.createElement('input');
  input.value = div.textContent || div.innerText || '';

  return input.value;
}

Ich habe selbst einen funktionierenden regulären Ausdruck erstellt:

str=str.replace(/(<\?[a-z]*(\s[^>]*)?\?(>|$)|<!\[[a-z]*\[|\]\]>|<!DOCTYPE[^>]*?(>|$)|<!--[\s\S]*?(-->|$)|<[a-z?!\/]([a-z0-9_:.])*(\s[^>]*)?(>|$))/gi, ''); 

Die akzeptierte Antwort funktioniert meistens einwandfrei. In IE erhalten Sie jedoch, wenn der String htmlnull ist, den "null" (anstelle von ''). Fest: 

function strip(html)
{
   if (html == null) return "";
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Auch für Escape-Zeichen funktioniert dies mit Pattern-Matching:

myString.replace(/((&lt)|(<)(?:.|\n)*?(&gt)|(>))/gm, '');

    (function($){
        $.html2text = function(html) {
            if($('#scratch_pad').length === 0) {
                $('<div id="lh_scratch"></div>').appendTo('body');  
            }
            return $('#scratch_pad').html(html).text();
        };

    })(jQuery);

Definieren Sie dieses als Jquery-Plugin und verwenden Sie es wie folgt:

$.html2text(htmlContent);

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

var div = document.getElementsByTagName('div');
for (var i=0; i<div.length; i++) {
    div[i].insertAdjacentHTML('afterend', div[i].innerHTML);
    document.body.removeChild(div[i]);
}

function strip_html_tags(str)
{
   if ((str===null) || (str===''))
       return false;
  else
   str = str.toString();
  return str.replace(/<[^>]*>/g, '');
}

Eine sicherere Möglichkeit, das HTML mit jQuery zu entfernen, besteht darin, zuerst mit jQuery.parseHTML ein DOM zu erstellen, Skripte zu ignorieren, bevor jQuery ein Element erstellt und dann nur den Text abruft.

function stripHtml(unsafe) {
    return $($.parseHTML(unsafe)).text();
}

Kann HTML sicher entfernen von:

<img src="unknown.gif" onerror="console.log('running injections');">

Und andere Heldentaten.

nJoy!