需要帮助使用正则表达式使代码更优雅

Question

我马上开始说我不是程序员,但我喜欢逛逛和学习.这就是我所拥有的:

1)以下格式的URL: http://site.com/#!/show/me/stuff/1-12/

2)jQuery分页脚本,输出可用页面数.每个号码都是一个链接href="#pageNumber"

3)绑定到所有分页链接的jQuery脚本.功能代码如下.

基本上,我的目标是使用正确的值替换我的URL中的1-12,例如,我选择页面#2.

这是我煮熟的东西,但非常难看:

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/

如何让这个更优雅,更少的步骤？

Answer 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) + '/';
});

这个怎么运作:

模式:斜杠\/,后跟一个或多个+数字\d,后跟连字符-,后跟另一个数字序列(\d+),后跟可选的?斜杠\/,后跟字符串的结尾$.

替换:我们可以将替换函数传递给replace方法,以便替换文本取决于替换文本.函数的第一个参数是整个match("/1-12/"),我们忽略它(_是"忽略它"的约定).

下一个参数对应于正则表达式中捕获的模式 - 用括号括起来的东西.在您的情况下,参数是范围的开始和结束的数字的字符串表示.

然后我只使用与你相同的逻辑,除此之外

• 我使用parseInt而不是parseFloat.(不要忘记基础的第二个参数,否则"08"会咬你)
• 我使用较少的中间变量.

最后,所有正则表达式都摆脱了字符串拆分并简化了代码.但是,在实际情况下,我可能会尝试考虑一个更强大的解决方案,它不依赖于URL上的脆弱字符串操作.