jquery - Dynamically generate url

Question

I am trying to dynamically create a url slug when a user types into an input. Unwanted characters should be removed. Spaces should be replaced by hyphens and everything into lowercase. So if a user types "Ruddy's Cheese Shop" it should render "ruddys-cheese-shop".

This is what I have so far.

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

It almost works but I am new to js. Thanks

"It almost works..." - can you be more specific?

Colin Brock
– Colin Brock

2012-01-13 18:11:36 +00:00
Commented Jan 13, 2012 at 18:11 — Colin Brock
– Colin Brock, Commented Jan 13, 2012 at 18:11
thewebsitetailor.com/jquery-slug-plugin

j08691
– j08691

2012-01-13 18:14:27 +00:00
Commented Jan 13, 2012 at 18:14 — j08691
– j08691, Commented Jan 13, 2012 at 18:14

dfsq · Accepted Answer · 2012-01-13 18:18:23Z

1

Your code but slightly improved.

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

You don't need to find $('#tb1') element over and over again since you have a refference to it inside the function as $(this).

http://jsfiddle.net/jFjR3/

answered Jan 13, 2012 at 18:18

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

craigmj · Accepted Answer · 2012-01-13 18:21:11Z

It looks ok except where you set the #tb2 value. I think you want:

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

Of course, remember since you've called toLowerCase, you don't need to replace upper case chars. Rather a simpler regexp:

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

If you also want to update the edit field as the user types, here's a full example. Note that it will only update #td2 when you start typing.

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

Ben · Accepted Answer · 2012-01-13 18:22:55Z

0

Looks like you need to run a couple of replaces i.e.

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

That converts ruddy's Cheese Shop to ruddys-cheese-shop

Hope that helps

answered Jan 13, 2012 at 18:22

Ben

1,78616 silver badges33 bronze badges

Collectives™ on Stack Overflow

jquery - Dynamically generate url

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related