Remover tags HTML em Javascript com Regex

108

Estou tentando remover todas as tags html de uma string em Javascript. Aqui está o que eu tenho ... Eu não consigo descobrir por que não está funcionando ... alguém sabe o que estou fazendo de errado?

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

Muito obrigado!

javascript regex Gabe
fonte

Respostas:

237

Tente isso, observando que a gramática do HTML é muito complexa para que as expressões regulares sejam corretas 100% do tempo:

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

Se você deseja usar uma biblioteca como a jQuery , pode simplesmente fazer isso:

console.log($('<p>test</p>').text());
karim79
fonte
2
Por que você está envolvendo o regex em uma string? var regex = / (<([^>] +)>) / ig;
brianary
Isso não vai funcionar. Especificamente, ele falhará em tags curtas: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
Mike Samuel
4
Esta é uma pergunta antiga, mas vou postar aqui: jsperf.com/regex-replace-vs-jquery-text
Josué
2
Tente executar isso "<img src=bogus onerror=alert(1337)". A primeira falha porque o analisador HTML não exige que a última tag seja fechada por um >e a segunda falha porque o carregamento da imagem começa antes mesmo de uma árvore DOM analisada ser adicionada ao DOM e $('<img ...>')invoca o analisador HTML.
Mike Samuel
1
A solução regex também falhará se a >for incluído em um valor de atributo; assim<div data="a + b > c">
MT0 01 de
34

Essa é uma pergunta antiga, mas me deparei com ela e pensei em compartilhar o método que usei:

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized agora conterá: "some text and some more text"

Simples, não é necessário jQuery e não deve decepcioná-lo, mesmo em casos mais complexos.

jsdw
fonte
Hiya. Bem, basicamente tudo o que faz é criar um novo DIV, definir o conteúdo HTML interno para o que for fornecido (o que presumo que significa que qualquer código HTML é analisado) e, em seguida, pede todo o conteúdo de texto do div, que ignora o referido HTML .
jsdw
no meu navegador o objeto não tem campoinnerText
Adrian
@Adrian a última linha selecionará a saída de temp.textContentse existir, e apenas tentará temp.innerTextse não existir . Seu navegador deve ter o primeiro, mas para navegadores que não têm, o último é usado no lugar :)
jsdw
Depois de examinar isso novamente (existem tantas respostas por aí). Estou usando este método. Este é o mesmo método usado em texto angular. Eles adicionaram alguns extras que incluí neste tópico
Rentering.com
Esta solução falhou para mim, estou usando o Editor de Texto @kolkov para Angular.
Waseem Ahmad Naeem
10

Isso funcionou para mim.

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

fonte
5
+1 obrigado. este forro despertou perfeito para minhas necessidades. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger
6

Aqui está como TextAngular (WYSISYG Editor) está fazendo isso. Também achei que esta é a resposta mais consistente, que é SEM REGEX.

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}
Rentering.com
fonte
2

você pode usar uma biblioteca poderosa para String de gerenciamento que é undrescore.string.js 

_('a <a href="#">link</a>').stripTags()

=> 'um link'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'a linkalert ("hello world!")'

Não se esqueça de importar esta biblioteca da seguinte forma: 

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>
Abdennour TOUMI
fonte
2
Eu olhei para a fonte e eles realmente usam a mesma regex sugerida em outra resposta internamente.
Eugene,
2

minha biblioteca JavaScript simples chamada FuncJS tem uma função chamada "strip_tags ()" que faz a tarefa para você - sem exigir que você insira nenhuma expressão regular.

Por exemplo, digamos que você deseja remover tags de uma frase - com esta função, você pode fazer isso simplesmente assim:

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

Isso produzirá "Esta string contém muitas tags!".

Para um melhor entendimento, leia a documentação em GitHub FuncJS .

Além disso, se desejar, forneça alguns comentários por meio do formulário. Seria muito útil para mim!

Sharikul Islam
fonte
Você poderia fornecer o que strip_tags()faz em vez de apenas promover sua biblioteca e não explicá-la? O link explica o uso da API, mas não o que ela faz .
Justin Beaudry
1
bem, encontrei no site que ele deu,strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };
Predrag Stojadinović
1

Esta é uma solução para tag HTML e & nbsp etc. e você pode remover e adicionar condições para obter o texto sem HTML e pode substituí-lo por qualquer.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}
Sahil Ralkar
fonte
0 
<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>
Surya R Praveen
fonte
0

A resposta selecionada nem sempre garante que o HTML seja removido, já que ainda é possível construir uma string HTML inválida por meio dela criando uma string como a seguinte.

  "<<h1>h1>foo<<//</h1>h1/>"

Esta entrada irá garantir que a remoção monte um conjunto de tags para você e resultará em:

  "<h1>foo</h1>"

além disso, a função de texto do jquery removerá o texto não circundado por tags.

Aqui está uma função que usa jQuery, mas deve ser mais robusta em ambos os casos:

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};
Rick Moynihan
fonte
0

A maneira como eu faço isso é praticamente uma linha única.

A função cria um objeto Range e, em seguida, cria um DocumentFragment no Range com a string como conteúdo filho.

Em seguida, ele captura o texto do fragmento, remove quaisquer caracteres "invisíveis" / de largura zero e remove qualquer espaço em branco à esquerda / à direita.

Sei que essa questão é antiga, só pensei que minha solução fosse única e queria compartilhar. :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);
ElijahFowler
fonte
-1

Como outros afirmaram, regex não funcionará. Reserve um momento para ler meu artigo sobre por que você não pode e não deve tentar analisar html com regex, que é o que você está fazendo quando tenta retirar html de sua string de origem.

Cole
fonte