谈一谈js实现网址自增一或减一

最近在实现网址(URL)的自增一/减一,类似于这样的网址:

1
https://test.com/aa/abcd123.html

通过操作,得到如下地址:

1
https://test.com/aa/abcd124.html

获取URL的数字部分

注意到,URL主体结构是通过斜杠来分开的(“/”),可以将字符串类型的URL以“/”来拆分为数组,然后再从数组的最后的元素中取数字部分,做运算后,再将数组合并回字符串。
通过split函数拆分字符串为数组:

1
2
let urlA=URL.split("/"),//["https:", "", "test.com", "aa", "abcd123.html"]
newURL="";

接着,取最后个数组值:

1
let urlB=urlA[urlA.length-1];

新建函数getURL()来完成取数字并完成加一操作,以下代码在该函数内。取urlB中的数字部分。需要注意的是,我们只能将数字部分整体取出,不能只取一位数,如果最后位是9,加一后等于10,位数增加了,后续就不好操作了…,这里用到了正则,继续拆分为数组,以便后续操作。同时,还应当考虑到网址里面可能不止一个部分有数字,比如“abc123ddd234.html”,我们的目的肯定是取低位,也就是最后的数字部分:

1
2
3
4
5
6
7
8
9
10
11
12
let _array=txt.match(/(\d*)/g);//将网址的最后部分继续拆分为数组
let i=0,
_num="",
_numNew,
_index;
for(i=_array.length-1;i>-1;i--){//由于需要得到的最后的数组部分,因此从数组的最后往前循环查询
if(!isNaN(parseInt(_array[i]))){
_num=_array[i];//取得的最后的数字部分
break;
}
}
_numNew=parseInt(_num)+1;//转换为数字后完成加一操作

完成加一操作后,转化回网址字符串

还有种特殊情况,如果网址类似于“abc005.html”这种,那么上述操作,取得的值为“005”,完成加一操作后将变成数字6,再转换为文本将变成“6”,跟我们预期的“006”有出入,需要做个特别处理:

1
2
3
if(_numNew.toString().length<_num.length){
_numNew="0".repeat(_num.length-_numNew.toString().length)+_numNew;
}

将得到的新数字(_numNew)替换原来的旧数字(_num)。同样要考虑到我们取的末尾数可能前面还有重复的,比如“ab123cd123.html”这种情况,这里用到lastIndexOf来获取末位旧数字(_num)出现的位置,以此位置为基准,获取前半部分+新数字(_numNew)+剩余部分字符串:

1
2
3
4
5
_index=txt.lastIndexOf(_num);
if(_index!=-1){
txt=txt.substr(0,_index)+_numNew.toString()+txt.substr(_index+_num.length)
}
return txt;

最后urlA再通过join将数组转换为字符串:

1
2
urlA[urlA.length-1]=getURL(urlB);
newURL=urlA.join("/");

总结

重点用到了以下函数,顺便做下记录:
1.split:用于把一个字符串分割成字符串数组,返回字符串数组;
2.match:在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回值为匹配结果的数组;
3.lastIndexOf:返回一个指定的字符串值最后出现的位置;
4.join:把数组中的所有元素放入一个字符串,返回该字符串。

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let URL="https://test.com/aa/abcd123.html",
newURL="";
let urlA=URL.split("/");
let urlB=urlA[urlA.length-1];
let getURL=function(txt){
let _array=txt.match(/(\d*)/g);//将网址的最后部分继续拆分为数组
let i=0,
_num="",
_numNew,
_index;
for(i=_array.length-1;i>-1;i--){//由于需要得到的最后的数组部分,因此从数组的最后往前循环查询
if(!isNaN(parseInt(_array[i]))){
_num=_array[i];//取得的最后的数字部分
break;
}
}
_numNew=parseInt(_num)+1;
if(_numNew.toString().length<_num.length){
_numNew="0".repeat(_num.length-_numNew.toString().length)+_numNew;
}
_index=txt.lastIndexOf(_num);
if(_index!=-1){
txt=txt.substr(0,_index)+_numNew.toString()+txt.substr(_index+_num.length)
}
return txt;
}
urlA[urlA.length-1]=getURL(urlB);
newURL=urlA.join("/");
console.log(newURL);//https://test.com/aa/abcd002.html