Gibt es einen einfachen Weg, um eine Zeichenfolge von HTML in JavaScript zu nehmen und entfernen Sie die HTML?
Es kann nicht mit " " umgehen.
Antworten
Zu viele Anzeigen?
Jibberboy2000
Punkte
504
Konvertierung von HTML für den E-Mail-Versand im Klartext, wobei Hyperlinks (a href) erhalten bleiben
Die obige Funktion von hypoxide gepostet funktioniert gut, aber ich war nach etwas, das im Grunde konvertieren würde HTML in einem Web-RichText-Editor (z. B. FCKEditor) erstellt und löschen Sie alle HTML, aber lassen Sie alle Links aufgrund der Tatsache, dass ich wollte sowohl die HTML-und die Nur-Text-Version zu helfen, die richtigen Teile zu einem STMP-E-Mail (sowohl HTML und Nur-Text).
Nach langem Suchen bei Google sind meine Kollegen und ich mit Hilfe der Regex-Engine in Javascript auf diese Lösung gekommen:
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 str variabel beginnt wie folgt:
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 stuffWie Sie sehen können, wurde der gesamte HTML-Code entfernt und der Link wurde beibehalten, wobei der verlinkte Text noch intakt ist. Außerdem habe ich die <p> y <br> Tags mit \n (Zeilenumbruchszeichen), so dass eine gewisse visuelle Formatierung beibehalten wurde.
Um das Linkformat zu ändern (z.B.. BBC (Link->http://www.bbc.co.uk) ) bearbeiten Sie einfach die $2 (Link->$1) , wobei $1 ist die href URL/URI und die $2 ist der verlinkte Text. Die meisten SMTP-Mail-Clients konvertieren die Links direkt in den reinen Text, so dass der Benutzer sie anklicken kann.
Ich hoffe, Sie finden dies nützlich.
Karl.S
Punkte
2016
Dies sollte in jeder Javascript-Umgebung funktionieren (einschließlich NodeJS).
const text = `
<html lang="en">
<head>
<style type="text/css">*{color:red}</style>
<script>alert('hello')</script>
</head>
<body><b>This is some text</b><br/><body>
</html>`;
// Remove style tags and content
text.replace(/<style[^>]*>.*<\/style>/gm, '')
// Remove script tags and content
.replace(/<script[^>]*>.*<\/script>/gm, '')
// Remove all opening, closing and orphan HTML tags
.replace(/<[^>]+>/gm, '')
// Remove leading spaces and repeated CR/LF
.replace(/([\r\n]+ +)+/gm, '');
@pstanton Ich habe den Code korrigiert und Kommentare hinzugefügt, sorry für die späte Antwort.
Janghou
Punkte
1283
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 kann eine solche Aktion keinen Schaden anrichten:
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 die in den Strings erwähnten Bilder werden in Chromium und Firefox nicht heruntergeladen, wenn http-Anfragen gespeichert werden.
Das führt keine Skripte hier in Chromium/Opera/Firefox auf Linux aus, also warum ist es nicht sicher?
Ich bitte um Entschuldigung, ich muss den Test verpasst haben, wahrscheinlich habe ich vergessen, bei jsFiddle auf run again zu klicken.
hegemon
Punkte
6256
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");Dies ist eine Regex-Version, die widerstandsfähiger gegen missgebildetes HTML ist, wie z.B.:
Ungeschlossene Tags
Some text <img
"<", ">" innerhalb von Tag-Attributen
Some text <img alt="x > y">
Zeilenumbrüche
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, "");
Wie kann man das umdrehen, um buchstäblich das Gegenteil zu tun? Ich möchte verwenden string.replace() NUR auf den Textteil anwenden und alle HTML-Tags und ihre Attribute unverändert lassen.
Elendurwen
Punkte
882
Ich veränderte Jibberboy2000's Antwort um mehrere <BR /> Tag-Formate, entfernen Sie alles innerhalb <SCRIPT> y <STYLE> Tags, formatieren den resultierenden HTML-Code durch Entfernen mehrerer Zeilenumbrüche und Leerzeichen und wandeln einige HTML-kodierte Codes in normale um. Nach einigen Tests scheint es, dass Sie die meisten vollständigen Webseiten in einfachen Text umwandeln können, bei dem Seitentitel und Inhalt erhalten bleiben.
In einem 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 "normal text" and stuff using <html encoding>
</center>
</body>
</html>wird
Dies ist mein Titel
Diese Zeichenfolge enthält HTML-Code, den ich entfernen möchte
In dieser Zeile BBC ( http://www.bbc.co.uk ) mit Link erwähnt wird.
Nun zurück zum "normalen Text" und zur Verwendung von
Die JavaScript-Funktion und die Testseite sehen so 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(/ /gi," ");
returnText=returnText.replace(/&/gi,"&");
returnText=returnText.replace(/"/gi,'"');
returnText=returnText.replace(/</gi,'<');
returnText=returnText.replace(/>/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 />
Ich mag diese Lösung, weil es Behandlung von HTML-Sonderzeichen hat... aber immer noch nicht annähernd genug von ihnen... die beste Antwort für mich würde mit allen von ihnen umgehen. (was wahrscheinlich ist, was Jquery tut).
Beachten Sie, dass zum Entfernen aller <br> Tags können Sie stattdessen einen guten regulären Ausdruck verwenden: /<br\s*\/?>/ Auf diese Weise haben Sie nur eine Ersetzung anstelle von 3. Auch scheint es mir, dass außer für die Dekodierung von Entitäten Sie eine einzelne Regex, etwas wie dieses haben können: /<[a-z].*?\/?>/ .
