Ta bort HTML-taggar från text med vanlig JavaScript

Hur man tar bort HTML-taggar från en sträng med endast vanlig JavaScript, utan att använda ett bibliotek?

Svar #1

Om du kör i en webbläsare är det enklaste sättet bara att låta webbläsaren göra det åt dig...

function stripHtml(html)
{
   let tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Observera: som folk har noterat i kommentarerna är det bäst att undvika detta om du inte kontrollerar källan till HTML (till exempel, kör inte detta på något som kan ha kommit från användarinmatning). För dessa scenarier kan du fortfarande låta webbläsaren göra jobbet åt dig - se Sabas svar om att använda den nu allmänt tillgängliga DOMParser.

Svar #2

myString.replace(/<[^>]*>?/gm, '');

Svar #3

Jag skulle vilja dela en redigerad version av Shog9:s godkända svar.

Som Mike Samuel påpekade i en kommentar, kan den funktionen köra inline javascript-kod.
Men Shog9 har rätt när han säger "låt webbläsaren göra det åt dig..."

så.. här är min redigerade version, med DOMParser:

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

här är koden för att testa den inbäddade JavaScript:

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

Dessutom begär det inte resurser vid tolkning (som bilder)

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

Svar #4

Enklaste sättet:

jQuery(html).text();

Det hämtar all text från en sträng av HTML.

Svar #5

Som en utökning av jQuery-metoden, om din sträng kanske inte innehåller HTML (till exempel om du försöker ta bort HTML från ett formulärfält)

jQuery(html).text();

kommer att returnera en tom sträng om det inte finns någon HTML

Använd :

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

istället.

Uppdatering: Som har påpekats i kommentarerna, under vissa omständigheter kommer denna lösning att köra JavaScript som finns i html om värdet av html kan påverkas av en angripare, använd en annan lösning.

Svar #6

Konvertera HTML för vanlig text e-post och behålla hyperlänkar (a href) intakta

Funktionen ovan som hypoxide postade fungerar bra, men jag var ute efter något som i princip skulle konvertera HTML skapad i en Web RichText-editor (till exempel FCKEditor) och rensa all HTML men behålla alla länkar av den anledningen att jag ville ha både HTML- och ren textversionen för att hjälpa till att skapa de korrekta delarna till ett STMP-mail (både HTML och ren text).

Efter en lång tid av att söka på Google kom jag och mina kollegor fram till detta med hjälp av regex-motorn i Javascript:

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, "");

variabeln str börjar så här:

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>

och sedan, efter att koden har körts, ser det ut så här:-

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

Som du kan se har all HTML tagits bort och länken har bevarats med den hyperlänkade texten fortfarande intakt. Jag har också ersatt <p> och <br>-taggarna med \n (radbrytningstecken) så att någon form av visuell formatering har behållits.

För att ändra länkformatet (t.ex. BBC (Link->http://www.bbc.co.uk)) redigerar du bara $2 (Link->$1), där $1 är href URL/URI och $2 är den hyperlänkade texten. Med länkarna direkt i brödtexten i vanlig text konverterar de flesta SMTP-e-postklienter dessa så att användaren har möjligheten att klicka på dem.

Hoppas du tycker detta är användbart.

Svar #7

En förbättring av det accepterade svaret.

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

På det här sättet kommer något som körs så här inte att orsaka skada:

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

Firefox, Chromium och Explorer 9+ är säkra. Opera Presto är fortfarande sårbart. Även bilderna som nämns i strängarna laddas inte ner i Chromium och Firefox vilket sparar http-förfrågningar.

Svar #8

Detta borde fungera på vilken Javascript-miljö som helst (inklusive 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>/g, '')
        // Remove script tags and content
        .replace(/<script[^>]*>.*<\/script>/g, '')
        // Remove all opening, closing and orphan HTML tags
        .replace(/<[^>]+>/g, '')
        // Remove leading spaces and repeated CR/LF
        .replace(/([\r\n]+ +)+/g, '');

Svar #9

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

Detta är en regex-version, som är mer motståndskraftig mot felaktig HTML, som:

Ostängda taggar

Some text <img

"<", ">" i taggattribut

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

Nyrader

Några <a href="http://google.com">

Koden

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

Svar #10

Jag ändrade Jibberboy2000:s svar för att inkludera flera <BR />-taggformat, ta bort allt inuti <SCRIPT> och <STYLE>-taggar, formatera den resulterande HTML:en genom att ta bort flera radbrytningar och mellanslag och konvertera viss HTML-kod till normal kod. Efter viss testning verkar det som att du kan konvertera de flesta fullständiga webbsidor till enkel text där sidans titel och innehåll bevaras.

I det enkla exemplet,

<!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>

blir

Det här är min titel

Den här strängen har HTML-kod som jag vill ta bort

I den här raden nämns BBC (http://www.bbc.co.uk) med länk.

Nu tillbaka till "normal text" och sånt som använder

JavaScript-funktionen och testsidan ser ut så här:

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;
}

Det användes med detta HTML:

<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 />

Svar #11

från CSS-tricks:

https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/

const originalString = `
  <div>
    <p>Hey that's <span>somthing</span></p>
  </div>
`;

const strippedString = originalString.replace(/(<([^>]+)>)/gi, "");

console.log(strippedString);

Relaterade artiklar