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

Question

首先我会说我不是程序员，但我确实喜欢四处探索和学习。这是我拥有的:

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

2) 输出可用页面数量的 jQuery 分页脚本。每个数字都是一个带有 href="#pageNumber"

的链接

3) 绑定(bind)到所有分页链接的 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/

我怎样才能用更少的步骤让它更优雅？

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+)，后跟可选的 ? 斜杠 \/，后跟字符串 $ 的结尾。

替换:我们可以将替换函数传递给替换方法，以便替换文本依赖于替换文本。该函数的第一个参数是整个匹配项 ("/1-12/")，我们忽略它(_ 是“忽略此”的约定)。

下一个参数对应于正则表达式中捕获的模式 - 那些用括号括起来的东西。在您的例子中，参数是范围开始和结束数字的字符串表示形式。

然后我只使用与您相同的逻辑，除了

• 我使用了 parseInt 而不是 parseFloat。 (尽管不要忘记基数的第二个参数，否则“08”会咬你)
• 我使用了较少的中间变量。

---

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