2

Preciso remover as tags HTML de uma variável, ou então não interpretar o HTML dessa variável. O problema é que a variável tem seu valor vindo de um input, logo:

var msg = $('input').val();

Como não há como pegar o .text() do input, eu não sei como retirar ou pelo menos não interpretar as tags HTML aí! Alguma ajuda ?

0

3 Respostas 3

2

Se quiser manter as tags sem que elas sejam interpretadas, você pode substituir o < e o > por sua entidade HTML &lt; e &gt; respectivamente. O resultado o navegador irá interpretar como um texto comum:

var msg = $('input').val();
msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
$("body").append(msg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="<b>abc</b>">

Removendo tags com .replace e expressão regular

var msg = $('input').val();
msg = msg.replace(/<.+?>/g, '');
console.log(msg)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="<i class='classe'>abc1</i> <b>def2</b>">

A expressão <.+?> captura tudo que for <nome da tag, atributos, fechamento etc.> e o .replace remove da string.

1

Quando colocamos uma string em formato de html dentro de um seletor jquery $(), o jquery transforma essa string em um objeto que pode ser manipulado pelo proprio jquery, e aí sim você pode extrair o texto.

var msg = $('input').val(); // output -> <div>Ola</div>
var textoExtraido = $(msg).text() == "" ? msg : $(msg).text(); // output -> Ola

Exemplo: https://jsfiddle.net/ag1swze4/4/

3
  • Obrigado. Não sabia dessa. Commented 1/07/2018 às 0:13
  • Mas tipo, não é obrigatório que tenha HTML nesse val(), logo dará erro? Commented 1/07/2018 às 0:16
  • 1
    Fiz um ajuste no codigo, se nao tiver html ele pega o conteudo normal. Nao da erro nao
    – Joao Paulo
    Commented 1/07/2018 às 0:26
1

Como você está usando jQuery, pode tratar o campo assim:

var msg = $('input').val();

//retira as tags
$('<p/>').html(msg).text();

//faz encode das tags
$('<p/>').text(msg).html();

Segue exemplo:

function f() {

var msg = $('input').val();

var opcao1 = $('<p/>').html(msg).text();

var opcao2 = $('<p/>').text(msg).html();

$('input[name="opcao1"]').val(opcao1);

$('input[name="opcao2"]').val(opcao2);

};

$('input').keyup(function() { f(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input placeholder="Digite o texto" type="text" /><br />
<p>Opção 1 (removendo tags)</p>
<input name="opcao1" type="text" />
<p>Opção 2 (encode tags)</p>
<input name="opcao2" type="text" />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .