正規表現でコードをエレガントにするための助けが必要

私はプログラマーではないと言ってすぐに始めるだろうが、私は物事を突き刺して学びたい。ここに私が持っているものがあります:

1) URL in the following format: http://site.com/#!/show/me/stuff/1-12/

2) jQuery pagination script that outputs the # of available pages. Each number is a link with href="#pageNumber"

3)すべてのページネーションリンクにバインドするjQueryスクリプト。機能コードは以下の通りです。

基本的に私の目標は、たとえば#2ページを選択する場合、URLの1-12を適切な値に置き換えることです。

それは私が働いているものの、非常に醜いものです:

var pageId = this.href.split("#")[1]; 
// this gets the number from the pagination link (i.e.,
// http://site.com/#2 becomes 2)

var url = location.hash.split("/");
var url = url[url.length-2];
// this is my way of extracting "1-12" from the URL :)

var showFrom = parseFloat(url.split("-")[0]);//1
var showTo = parseFloat(url.split("-")[1]);//12
var itemsPerPage= (showTo-showFrom)+1;//12
var newShowTo = (itemsPerPage*pageId);//24
var newShowFrom = (itemsPerPage*pageId)-itemsPerPage+1;//13
var newUrl = newShowFrom+"-"+newShowTo;//13-24

location.hash = location.hash.replace(url, newUrl);
// http://site.com/#!/show/me/stuff/1-12/ now becomes
// http://site.com/#!/show/me/stuff/13-24/

どのようにこれをよりエレガントで、より少ないステップで行うことができますか?

2
それ以外では、整数を使用しているので、parseFloat()ではなくparseInt()を使用してください。
追加された 著者 Diodeus - James MacFarlane,

1 答え

あなたのコードはそれほど醜いものではありません - 変数名は自明ですが、私たちは皆がもっと悪いのものを見ていることを保証することができます。

とにかく、ここであなたがしたのと同じことをするが正規表現を使用する方法です:

var pageId = this.href.split("#")[1];   
var pattern = /\/(\d+)-(\d+)\/?$/;
location.hash = location.hash.replace(pattern, function(_, showFrom_str, showTo_str){
    var showFrom = parseInt(showFrom_str, 10);
    var showTo   = parseInt(showTo_str, 10);
    var itemsPerPage = showTo - showFrom + 1;
    return '/' + ((itemsPerPage * pageId) - itemsPerPage + 1) + '-' + (itemsPerPage * pageId) + '/';
});

仕組み:

The pattern: slash \/, followed by one or more + digits \d, followed by a hyphen -, followed by another sequence of digits (\d+), followed by an optional ? slash \/, followed by the end of the string $.

The substitution: We can pass a substitution function to the replace method so that we have the replacement text depend of the replaced text. The first argument to the function is the whole match ("/1-12/") and we ignore it (_ is a convention for "ignore this").

次の引数は、正規表現内のキャプチャされたパターンに対応します。それらはカッコで囲まれたものです。あなたの場合、引数は範囲の開始と終了の数値の文字列表現です。

私はあなたと同じロジックを使用しますが、

  • parseFloatの代わりにparseIntを使用しました。 (ただし、ベースの2番目のパラメータについて忘れないでください。そうしないと、 "08"はあなたに噛まれます)
  • 中間変数を少なくしました。

結局のところ、すべての正規表現は文字列の分割を取り除き、コードを合理化していました。しかし、現実の状況では、おそらくURL上の壊れやすい文字列操作に依存しない、より堅牢なソリューションについて考えようとします。

6
追加された
よくやった!どうもありがとうございました;私は最適化されたソリューションから学びます。物事をより頑強にする方法については、私は物事を過度に複雑化することなく、それをどうやって進めるのかについてはわかりません。ハッシュURL内のすべてのパラメータは、要求が行われたときにサーバーによって検証されるため、適切でないものがある場合は、訪問者を開始ページにリダイレクトするか、エラーメッセージを表示します。
追加された 著者 MarkL,
私はちょうどそのコードが進歩しているが、後方には動かないことに気付いたことがある(pageId、またはクリックされたページ番号は上品なソリューションから省かれていた)。
追加された 著者 MarkL,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript