Question Supprimer le code HTML du texte JavaScript


Existe-t-il un moyen facile de prendre une chaîne de caractères HTML dans JavaScript et de supprimer le code HTML?


498
2018-05-04 22:39


origine


Réponses:


Si vous utilisez un navigateur, le plus simple est de laissez le navigateur le faire pour vous ...

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

Note: comme les gens l'ont noté dans les commentaires, il vaut mieux éviter cela si vous ne contrôlez pas la source du code HTML (par exemple, ne l'exécutez pas sur tout ce qui pourrait provenir de l'entrée de l'utilisateur). Pour ces scénarios, vous pouvez encore laissez le navigateur faire le travail pour vous - voir la réponse de Saba sur l'utilisation du DOMParser maintenant largement disponible.


624
2018-05-04 22:48



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

422
2018-05-04 22:42



Manière la plus simple:

jQuery(html).text();

Cela récupère tout le texte d'une chaîne de HTML.


223
2017-12-26 01:26



En tant qu'extension de la méthode jQuery, il se peut que votre chaîne ne contienne pas de code HTML (par exemple, si vous essayez de supprimer du code HTML d'un champ de formulaire)

jQuery(html).text(); 

retournera une chaîne vide s'il n'y a pas de code HTML

Utilisation:

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

au lieu.

Mettre à jour: Comme cela a été souligné dans les commentaires, dans certaines circonstances cette solution exécutera javascript contenu dans html si la valeur de html peut être influencé par un attaquant, utilisez une solution différente.


49
2018-01-15 12:20



Conversion de HTML pour l'envoi par courrier électronique en texte brut en conservant les liens hypertexte (a href) intacts

La fonction ci-dessus postée par hypoxyde fonctionne bien, mais j'étais après quelque chose qui convertirait essentiellement HTML créé dans un éditeur Web RichText (par exemple FCKEditor) et effacer tout le HTML mais laisser tous les liens dus au fait que je voulais le HTML et la version en texte brut pour aider à créer les parties correctes d'un email STMP (HTML et texte brut).

Après une longue période de recherche Google moi-même et mes collègues ont trouvé cela en utilisant le moteur regex en 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, "");

la str La variable commence comme ceci:

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>

et puis après que le code a exécuté il ressemble à ceci: -

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

Comme vous pouvez le voir tout le HTML a été supprimé et le lien a été persévéré avec le texte en lien hypertexte qui est toujours intact. J'ai aussi remplacé le <p> et <br> tags avec \n (caractère de nouvelle ligne) afin de conserver une certaine forme visuelle.

Pour changer le format du lien (par ex. BBC (Link->http://www.bbc.co.uk) ) éditez simplement le $2 (Link->$1), où $1 est l'URL / URI href et le $2 est le texte hyperlien. Avec les liens directement dans le corps du texte brut la plupart des clients de messagerie SMTP les convertissent afin que l'utilisateur ait la possibilité de cliquer dessus.

Espérant que ceci puisse t'être utile.


35
2017-08-06 08:30



Je voudrais partager une version éditée du Shog9de la réponse approuvée.


Comme Mike Samuel pointé avec un commentaire, cette fonction peut exécuter des codes javascript en ligne.
Mais Shog9 est juste en disant "laissez le navigateur le faire pour vous ..."

alors .. ici ma version éditée, en utilisant DOMParser:

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

voici le code pour tester le javascript en ligne:

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

En outre, il ne demande pas de ressources sur l'analyse (comme les images)

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

35
2017-11-06 15:46



Une amélioration par rapport à une réponse antérieure.

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

De cette façon, quelque chose qui fonctionne comme ça ne fera pas de mal:

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

Firefox, Chromium et Explorer 9+ sont en sécurité. Opera Presto est toujours vulnérable. Les images mentionnées dans les chaînes ne sont pas non plus téléchargées dans Chromium et Firefox en sauvegardant les requêtes http.


26
2017-07-31 20:14



J'ai changé La réponse de Jibberboy2000 d'inclure plusieurs <BR /> formats de balises, retirez tout à l'intérieur <SCRIPT> et <STYLE> tags, formatez le HTML résultant en supprimant plusieurs sauts de ligne et espaces et convertissez du code HTML en normal. Après quelques tests, il apparaît que vous pouvez convertir la plupart des pages Web complètes en un texte simple où le titre et le contenu de la page sont conservés.

Dans l'exemple simple,

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

devient

C'est mon titre

Cette chaîne a le code html que je veux supprimer

Dans cette ligne BBC (http://www.bbc.co.uk) avec lien est mentionné.

Maintenant, retour à "texte normal" et d'autres choses en utilisant

La fonction JavaScript et la page de test ressemblent à ceci:

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

Il a été utilisé avec ce 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 />

15
2018-01-10 12:59



Cela devrait faire le travail sur n'importe quel environnement Javascript (NodeJS inclus). text.replace(/<[^>]+>/g, '');


14
2018-01-20 05:49