194

私は CodeIgniter でアプリに取り組んでおり、フォームのフィールドにURL slugを動的に生成させようとしています。私がやりたいのは、句読点を削除し、小文字に変換し、スペースをハイフンに置き換えることです。たとえば、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);  
});
4

23 に答える 23

127 
var slug = function(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  // remove accents, swap ñ for n, etc
  var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
  var to   = "aaaaaeeeeeiiiiooooouuuunc------";
  for (var i = 0, l = from.length; i < l; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
           .replace(/\s+/g, '-') // collapse whitespace and replace by -
           .replace(/-+/g, '-'); // collapse dashes

  return str;
};

試してみてください

slug($('#field').val())

オリジナル：http ：//dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/

編集：より多くの言語固有の文字に拡張：

var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆĞÍÌÎÏİŇÑÓÖÒÔÕØŘŔŠŞŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇğíìîïıňñóöòôõøðřŕšşťúůüùûýÿžþÞĐđßÆa·/_,:;";
var to   = "AAAAAACCCDEEEEEEEEGIIIIINNOOOOOORRSSTUUUUUYYZaaaaaacccdeeeeeeeegiiiiinnooooooorrsstuuuuuyyzbBDdBAa------";
于 2011-04-25T19:52:51.413 に答える
23

まず、正規表現は引用符で囲んではならないので、'/\s/g'は/\s/gにする必要があります。

英数字以外のすべての文字をダッシュ​​に置き換えるには、これが機能するはずです(サンプルコードを使用):

$("#Restaurant_Name").keyup(function() {
  var Text = $(this).val();
  Text = Text.toLowerCase();
  Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
  $("#Restaurant_Slug").val(Text);        
});

それはトリックを行う必要があります...

于 2009-06-28T09:16:22.463 に答える
7

必要なのはプラスだけでした:)

$("#Restaurant_Name").keyup(function() {
  var Text = $(this).val();
  Text = Text.toLowerCase();
  var regExp = /\s+/g;
  Text = Text.replace(regExp,'-');
  $("#Restaurant_Slug").val(Text);        
});
于 2009-06-28T00:16:20.020 に答える
3

ほとんどの言語で実装するプラグインを作成します: http://leocaseiro.com.br/jquery-plugin-string-to-slug/

デフォルトの使用法:

$(document).ready( function() {
    $("#string").stringToSlug();
});

非常に簡単です stringToSlug jQuery Plugin があります

于 2009-09-18T14:15:31.840 に答える
1

これには独自の関数を使用できます。

試してみてください: http://jsfiddle.net/xstLr7aj/

function string_to_slug(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  // remove accents, swap ñ for n, etc
  var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
  var to   = "aaaaeeeeiiiioooouuuunc------";
  for (var i=0, l=from.length ; i<l ; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

  return str;
}
$(document).ready(function() {
    $('#test').submit(function(){
        var val = string_to_slug($('#t').val());
        alert(val);
        return false;
    });
});
于 2015-08-05T18:56:24.050 に答える
1

受け入れられた回答は私のニーズを満たしていませんでした (アンダースコアを許可し、最初と最後にダッシュを処理しないなど)、他の回答には私のユースケースに合わない他の問題があったため、ここに slugify 関数があります私が思いついた：

function slugify(string) {
    return string.trim() // Remove surrounding whitespace.
    .toLowerCase() // Lowercase.
    .replace(/[^a-z0-9]+/g,'-') // Find everything that is not a lowercase letter or number, one or more times, globally, and replace it with a dash.
    .replace(/^-+/, '') // Remove all dashes from the beginning of the string.
    .replace(/-+$/, ''); // Remove all dashes from the end of the string.
}

これにより、' foo!!!BAR_-_-_baz-' (先頭のスペースに注意) が に変わりfoo-bar-bazます。

于 2016-09-01T20:31:08.633 に答える
0 
//
//  jQuery Slug Plugin by Perry Trinier (perrytrinier@gmail.com)
//  MIT License: http://www.opensource.org/licenses/mit-license.php

jQuery.fn.slug = function(options) {
var settings = {
    slug: 'slug', // Class used for slug destination input and span. The span is created on $(document).ready() 
    hide: true   // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span. 
};

if(options) {
    jQuery.extend(settings, options);
}

$this = $(this);

$(document).ready( function() {
    if (settings.hide) {
        $('input.' + settings.slug).after("<span class="+settings.slug+"></span>");
        $('input.' + settings.slug).hide();
    }
});

makeSlug = function() {
        var slug = jQuery.trim($this.val()) // Trimming recommended by Brooke Dukes - http://www.thewebsitetailor.com/2008/04/jquery-slug-plugin/comment-page-1/#comment-23
                    .replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() // See http://www.djangosnippets.org/snippets/1488/ 
                    .replace(/\-{2,}/g,'-'); // If we end up with any 'multiple hyphens', replace with just one. Temporary bugfix for input 'this & that'=>'this--that'
        $('input.' + settings.slug).val(slug);
        $('span.' + settings.slug).text(slug);

    }

$(this).keyup(makeSlug);

return $this;
    };

これは同じ問題で私を助けました!

于 2013-02-17T21:48:07.313 に答える
0 
String.prototype.slug = function(e='-'){
  let $this=this
        .toUpperCase()
        .toLowerCase()
        .normalize('NFD')
        .trim()
        .replace(/\s+/g,e)
        .replace(/-\+/g,'')
        .replace(/-+/g,e)
        .replace(/^-/g,'')
        .replace(/-$/g,'')
        .replace(/[^\w-]/g,'');
  return $this
        .toUpperCase()
        .toLowerCase()
        .normalize('NFD')
        .trim()
        .replace(/\s+/g,e)
        .replace(/-\+/g,'')
        .replace(/-+/g,e)
        .replace(/^-/g,'')
        .replace(/-$/g,'')
        .replace(/[^\w-]/g,'');
}

いくつかの不要な文字のためにさらに-を入れることができたので、2回フィルタリングしました

于 2021-05-30T03:14:26.047 に答える