0

当用户输入输入时，我正在尝试动态创建一个 url slug。不需要的字符应该被删除。空格应替换为连字符，所有内容都应替换为小写。因此，如果用户键入“Ruddy's Cheese Shop”，它应该呈现“ruddys-cheese-shop”。

这就是我到目前为止所拥有的。

<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 新手。谢谢

4

3 回答 3

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/

于 2012-01-13T18:18:23.890 回答
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>
于 2012-01-13T18:12:38.253 回答
0

看起来你需要运行几个替换，即

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

将 ruddy's Cheese Shop 转变为 ruddys-cheese-shop

希望有帮助

于 2012-01-13T18:22:55.180 回答