2012-01-13 100 views
0

Я пытаюсь динамически создавать URL-адрес, когда пользователь вводит ввод. Нежелательные символы следует удалить. Пространства должны быть заменены дефисами и все на нижний регистр. Поэтому, если пользователь вводит «Сырный магазин Ruddy's», он должен сделать «ruddys-сыр-магазин».jquery - Динамически генерировать url

Это то, что у меня есть до сих пор.

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

Это почти работает, но я новичок в js. Спасибо

+0

«Это почти работает ... »- можете ли вы быть более конкретным? –

+0

http://www.thewebsitetailor.com/jquery-slug-plugin/ – j08691

ответ

1

Ваш код немного улучшен.

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

Вам не нужно, чтобы найти $('#tb1') элемент снова и снова, так как у вас есть референс к ней внутри функции, как $(this).

http://jsfiddle.net/jFjR3/

0

Он выглядит нормально, за исключением случаев, когда вы устанавливаете значение # tb2. Я думаю, что вы хотите:

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

Конечно, помните, так как вы назвали toLowerCase, вам не нужно заменить символы в верхнем регистре. Скорее проще регулярное выражение:

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

Если вы хотите, чтобы обновить поле редактирования, как типы пользователей, вот полный пример. Обратите внимание, что при запуске будет обновлено # td2.

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

Похоже, вам нужно запустить пару заменяет т.е.

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

Это превращает Радди сыр магазин в ruddys-сыр-магазине

Надежда, что помогает

Смежные вопросы