jquery - générer url Dynamiquement

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

  •  28-10-2019
  •  | 
  •  

Question

Je suis en train de créer dynamiquement une limace url lorsqu'un utilisateur tape dans une entrée. caractères indésirables doivent être supprimés. Les espaces doivent être remplacés par des traits d'union et tout en minuscules. Donc, si un type d'utilisateur "Cheese Ruddy Shop" il devrait rendre "ruddys-fromage-shop".

est ce que j'ai jusqu'à présent. 

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

Il fonctionne presque, mais je suis nouveau js. Merci

Était-ce utile?

La solution

Votre code mais légèrement amélioré. 

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

Vous n'avez pas besoin de trouver l'élément de $('#tb1') encore et encore, puisque vous avez un refference à l'intérieur de la fonction $(this).

http://jsfiddle.net/jFjR3/

Autres conseils

Il a l'air ok, sauf si vous définissez la valeur # TB2. Je pense que vous voulez: 

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

Bien sûr, souvenez-vous depuis que vous avez appelé toLowerCase, vous n'avez pas besoin de remplacer les caractères majuscules. Plutôt une expression rationnelle plus simple: 

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

Si vous souhaitez également mettre à jour le champ d'édition comme les types d'utilisateurs, voici un exemple complet. Notez qu'il ne mettra à jour # dv2 lorsque vous commencez à taper. 

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

On dirait que vous devez exécuter quelques i.e. remplace. 

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

qui convertit le Cheese Shop vermeille à ruddys-fromage-shop

L'espoir qui aide

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top