2

Tenho esse código que copia tudo que se digita em um input para o outro, quero que quado ele copia para o outro input substitua caracteres especiais, espaços com o "-" e letras minusculas. Como poderia fazer como jquery?

$('.mirror').on('keyup', function() {
    $('.'+$(this).attr('class')).val($(this).val());
})


<input type="text" class="mirror" placeholder="one">
<input type="text" class="mirror" placeholder="two">

Exemplo de entrada: Ação Esperada

Saída esperada: acao-esperada

5
  • Já tentou utilizar o str.replace do JavaScript?
    – Woss
    Commented 29/06/2017 às 15:57
  • $('.mirror').on('keyup', function() { $str.replace(('.'+$(this).attr('class')).val($(this).val())); }); Fiz assim e nao deu Commented 29/06/2017 às 16:00
  • Você quer substituir tais caracteres pelo quê? Esse seu replace não parece fazer sentido. Você já leu a documentação da função?
    – Woss
    Commented 29/06/2017 às 16:04
  • Podes dar um exemplo do texto que queres substituir e como deve ficar?
    – Sergio
    Commented 29/06/2017 às 18:15
  • Ação Esperada acao-esperada Commented 29/06/2017 às 18:21

4 Respostas 4

2

Usando Expressão regular /[^\w\s]/gi, '-' para substituir caracteres especias por tracinho (-) e a seguir a função toLowerCase() para transformar em letras minusculas chegaremos ao resultado esperado.

Nos arrays find e replace pode configurar os caracteres a serem substituídos respectivamente.

$(document).ready(function() {
$('.mirror').on('keyup', function() {
 
 var v1 = document.getElementById("codigo").value ;
    
 var find = ["ã","à","á","ä","â","è","é","ë","ê","ì","í","ï","î","ò","ó","ö","ô","ù","ú","ü","û","ñ","ç"]; "à","á","ä","â","è","é","ë","ê","ì","í","ï","î","ò","ó","ö","ô","ù","ú","ü","û","ñ","ç"
 var replace = ["a","a","a","a","a","e","e","e","e","i","i","i","i","o","o","o","o","u","u","u","u","n","c"];

    for (var i = 0; i < find.length; i++) {
        v1 = v1.replace(new RegExp(find[i], 'gi'), replace[i]);
    }

    var desired = v1.replace(/\s+/g, '-');
    desired = desired.toLowerCase();

    var v2 = document.getElementById("copia").value = desired;
    
});   
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="codigo" class="mirror" placeholder="one">
<input type="text" id="copia" class="mirror" placeholder="two">

1
  • Se digitar "ação", o resultado esperado é "acao", como comentado.
    – Woss
    Commented 29/06/2017 às 20:04
1

Pelo o que entendi, você quer criar uma espécie de slug no segundo input a partir dos dados informados no primeiro. Para isso, utilize a função abaixo:

function slugify(str) {
  
  // Converte o texto para caixa baixa:
  str = str.toLowerCase();
  
  // Remove qualquer caractere em branco do final do texto:
  str = str.replace(/^\s+|\s+$/g, '');

  // Lista de caracteres especiais que serão substituídos:
  const from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
  
  // Lista de caracteres que serão adicionados em relação aos anteriores:
  const to   = "aaaaaeeeeeiiiiooooouuuunc------";
  
  // Substitui todos os caracteres especiais:
  for (let i = 0, l = from.length; i < l; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  // Remove qualquer caractere inválido que possa ter sobrado no texto:
  str = str.replace(/[^a-z0-9 -]/g, '');
  
  // Substitui os espaços em branco por hífen:
  str = str.replace(/\s+/g, '-');

  return str;
};

console.log(slugify("Ação Esperada"));

Função baseada na apresentada nesta resposta no SOen.

Ou seja, utilizando com os input:

function slugify(str) {
  
  // Converte o texto para caixa baixa:
  str = str.toLowerCase();
  
  // Remove qualquer caractere em branco do final do texto:
  str = str.replace(/^\s+|\s+$/g, '');

  // Lista de caracteres especiais que serão substituídos:
  const from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
  
  // Lista de caracteres que serão adicionados em relação aos anteriores:
  const to   = "aaaaaeeeeeiiiiooooouuuunc------";
  
  // Substitui todos os caracteres especiais:
  for (let i = 0, l = from.length; i < l; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  // Remove qualquer caractere inválido que possa ter sobrado no texto:
  str = str.replace(/[^a-z0-9 -]/g, '');
  
  // Substitui os espaços em branco por hífen:
  str = str.replace(/\s+/g, '-');

  return str;
};

$(function () {

  $("#input-one").on("keyup", function (event) {
  
      $("#input-two").val(slugify($(this).val()));
  
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="input-one" class="mirror" placeholder="one">
<input type="text" id="input-two" class="mirror" placeholder="two">

Perceba que eu defini o atributo id para cada campo e o utilizei para selecionar devidamente o campo que desejo obter ou alterar o valor.

5
  • Ele também quer substituir os caracteres especiais pelo tracinho ( - ). Agora te pergunto ç é caracterer especial?
    – user60252
    Commented 29/06/2017 às 20:06
  • @LeoCaracciolo, não. Veja o comentário dele na pergunta. Adicionei o exemplo no corpo da pergunta para evitar confusão.
    – Woss
    Commented 29/06/2017 às 20:07
  • blz, agora vi o comentario, vou ter que trabalhar mais né :)
    – user60252
    Commented 29/06/2017 às 20:09
  • @LeoCaracciolo Sobre o ç, acredito que sim, pois não consta na tabela ASCII. Não sei exatamente o objetivo de remover esses caracteres neste contexto, mas partindo do pressuposto que será utilizado em algum lugar que não possui suporte a esses caracteres, também não haveria suporte para o ç.
    – Woss
    Commented 29/06/2017 às 20:13
  • entendido, sua explicação tem tudo a ver, valeu
    – user60252
    Commented 29/06/2017 às 20:17
0

Usa assim o substrig/replace:

$('.mirror').on('keyup', function() {
    var str = $(this).val();
    str = str.replace(".", "");
    str = str.replace(",", ""); //Tu adicionas todos os caracteres que tu queres remover.
    var res = str.replace("#", ""); //E no último, joga na variável 'res'
    $("#novoTexto").val(res);
})

<input type="text" class="mirror" placeholder="one">
<input id="novoTexto" type="text" placeholder="two">
3
  • ele não copia do outro lado com esse código Commented 29/06/2017 às 17:58
  • alterei a resposta pra ti @WagnerMartinsBodyboard
    – israel3D
    Commented 4/07/2017 às 19:56
  • Mastiguei aí pra ti @WagnerMartinsBodyboard . Adicionei um "id" e retirei a classe "mirror" no "two".
    – israel3D
    Commented 4/07/2017 às 19:58
-1
$('.mirror').on('keyup', function() {
    var str = $(this).val();
    var res = str.replace(" ", "-");
    $('.'+$(this).attr('class')).val(res).val();
})

Fiz assim agora ele muda nois dois inputs quero que mude apenas no input id=two como faria?

3
  • Mude o seletor no jQuery para o respectivo id.
    – Woss
    Commented 29/06/2017 às 18:16
  • pode me dizer como faço isso? Commented 29/06/2017 às 18:24
  • $('#two.'+$(this).attr('class')).val(res); Alternativamente, porque este evento roda num elemento cuja classe é mirror, só $('#two.mirror').val(res); já resolve...
    – Wtrmute
    Commented 29/06/2017 às 18:46

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 .