jQuery-動的にURLを生成します

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

  •  28-10-2019
  •  | 
  •  

質問

ユーザーが入力を入力すると、URLスラッグを動的に作成しようとしています。不要な文字を削除する必要があります。スペースはハイフンに置き換え、すべてを小文字に置き換える必要があります。したがって、ユーザーが「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に慣れていません。ありがとう

役に立ちましたか？

解決

あなたのコードですが、わずかに改善されました。

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

見つける必要はありません $('#tb1') 関数内でそれに反転があるので、何度も何度も要素 $(this).

http://jsfiddle.net/jfjr3/

他のヒント

＃TB2値を設定する場合を除いて、大丈夫に見えます。私はあなたが望んでいると思います：

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

もちろん、Tolowercaseに電話したので、大文字の文化を交換する必要はありません。むしろよりシンプルなregexp：

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>

いくつかの交換を実行する必要があるように見えますIE

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

RuddyのチーズショップをRuddys-Cheeseshopに変換します

それが役立つことを願っています

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top