jQuery - genera dinamicamente l'URL

StackOverflow https://stackoverflow.com/questions/8855136

  •  28-10-2019
  •  | 
  •  

Domanda

Sto cercando di creare dinamicamente una lumaca URL quando un utente digita un input. I caratteri indesiderati devono essere rimossi. Gli spazi devono essere sostituiti da trattini e tutto in minuscolo. Quindi, se un utente digita "Ruddy's Cheese Shop", dovrebbe rendere "Ruddys-Cheese-shop".

Questo è quello che ho finora.

<input id="tb1" />
<div id="tb2"></div>

$('#tb1').keyup(function() {
  var Text = $('#tb1').val();
  Text = Text.toLowerCase();
  Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
  $('#tb2').html($('#tb1').val(Text));
});

Funziona quasi ma sono nuovo per JS. Grazie

È stato utile?

Soluzione

Il tuo codice ma leggermente migliorato.

$('#tb1').keyup(function() {
    var text = $(this).val().toLowerCase();
    text = text.replace(/[^a-z0-9]+/g, '-');
    $('#tb2').text(text);
});

Non hai bisogno di trovare $('#tb1') elemento più e più volte poiché hai una referenza all'interno della funzione come $(this).

http://jsfiddle.net/jfjr3/

Altri suggerimenti

Sembra ok tranne dove si imposta il valore #tb2. Penso che tu voglia:

$('#tb2').html(Text);

Naturalmente, ricorda che da quando hai chiamato TolowerCase, non è necessario sostituire i caratteri della maiuscolo. Piuttosto un regexp più semplice:

Text = Text.replace(/[^a-z0-9]+/g,'-');

Se si desidera anche aggiornare il campo di modifica come tipi utente, ecco un esempio completo. Si noti che aggiornerà #TD2 solo quando inizierà a digitare.

  <html>
    <head>
      <script src="js/jquery.js" ></script>
      <script language="javascript">
      $(function() {
        $('#tb1').keyup(function() {
           var Text = $('#tb1').val();
           Text = Text.toLowerCase();
           Text = Text.replace(/[^a-z0-9]+/g,'-');
           $('#tb2').html(Text);
           $('#tb1').val(Text);
        });
      });
      </script>
    </head>
  <body>
  <input type="text" id="tb1" value="Ruddy's Cheese Shop" />
  <div id="tb2"></div>
  </body>
  </html>

Sembra che tu debba eseguire un paio di sostituti IE

Text = Text.replace(/[\s]+/g,'-'); 
Text = Text.replace(/[^a-z_0-9\-]+/g,'');

Che converte il negozio di formaggi di Ruddy a Ruddys-Cheese-shop

Spero possa aiutare

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top