1. ホーム
  2. javascript

[解決済み] jQueryでTitleをURLスラッグに変換する方法とは?

2022-04-13 01:51:49

質問

CodeIgniterでアプリを作っているのですが、フォーム上のフィールドに動的に URLスラッグ . 句読点を削除し、小文字に変換し、スペースをハイフンに置き換えたいのです。例えば、Shane's Rib Shackは、shanes-rib-shackとなります。

今のところ、こんな感じです。小文字の部分は簡単でしたが、置換は全く機能していないようです。また、句読点を削除するアイデアもありません。

$("#Restaurant_Name").keyup(function() {
  var Text = $(this).val();
  Text = Text.toLowerCase();
  Text = Text.replace('/\s/g','-');
  $("#Restaurant_Slug").val(Text);  
});

解決方法は?

スラッグ」という言葉がどこから来たのか、さっぱりわからないが、これでいいのだ。

function convertToSlug(Text) {
  return Text.toLowerCase()
             .replace(/ /g, '-')
             .replace(/[^\w-]+/g, '');
}

最初の replace メソッドはスペースをハイフンに変更し、2番目のreplaceは英数字、アンダースコア、ハイフン以外を削除します。

もし、quot;のような - this" が "like---this" になるのが嫌なら、代わりにこっちを使えばいいんだ。

function convertToSlug(Text) {
  return Text.toLowerCase()
             .replace(/[^\w ]+/g, '')
             .replace(/ +/g, '-');
}

これにより、1回目の置換ではハイフンが削除され(スペースは削除されない)、2回目の置換では連続したスペースが1つのハイフンに凝縮されます。

つまり、"like - this" は "like-this" と出力されるわけです。