JQuery - динамически генерировать URL - PullRequest
Новая
       7

JQuery - динамически генерировать URL

0 голосов
/ 13 января 2012

Я пытаюсь динамически создать 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.Спасибо

Ответы [ 3 ]

1 голос
/ 13 января 2012

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

$('#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 голосов
/ 13 января 2012

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

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

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

Надеюсь, что помогает

0 голосов
/ 13 января 2012

Выглядит нормально, кроме случаев, когда вы устанавливаете значение # 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>
...