gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 16:23:47 26 4
gpt4 key购买 nike

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

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/

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

最佳答案

您的代码并没有那么难看 - 变量名是不言自明的,我可以向您保证,我们都见过更糟的事情。

无论如何,这里有一种方法可以做与您所做的相同的事情,但使用的是正则表达式:

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 上脆弱的字符串操作的更强大的解决方案。

关于javascript - 需要帮助使用正则表达式使代码优雅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8264119/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com