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

Need help making code elegant with regular expression

本文关键字：正则表达式 代码 帮助      更新时间：2023-09-26

我首先要说的是，我不是一个程序员，但我确实喜欢到处闲逛和学习。我有:

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/

我怎样才能使它更优雅，更少的步骤?

你的代码并没有那么难看——变量名是不言自明的，我可以向你保证，我们都见过比更糟糕的。

无论如何，这里有一种方法可以做同样的事情，但使用正则表达式:

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方法，这样我们就有了依赖于被替换文本的替换文本。函数的第一个参数是整个匹配("/1-12/")，我们忽略它(_是"忽略这个"的约定)。

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

我就使用和你一样的逻辑，除了

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

最后，所有的正则表达式都去掉了字符串分割，并简化了代码。然而，在实际情况下，我可能会尝试考虑一个更健壮的解决方案，不依赖于URL上脆弱的字符串操作。

相关文章：