常见的面试问题：【JavaScript】匹配elective后的数字输出

microcosm1994 发布于2019-08-26 18:37 / 867人阅读

摘要：方案一其中这个正则表达式是零宽度断言的写法，断言有无内容，是匹配的字符的，是指匹配以开头的字符串指匹配数字开头，可能不定数量逗号分隔后是数字的字符串。

一、问题

Url 有以下三种情况：

    var url_1 = "https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33";
    var url_2 = "https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33";
    var url_3 = "https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33";

匹配 elective 后的数字输出（写出你认为的最优解法）:

    [] || ["800"] || ["800","700"]

二、答案

答题可以考虑下以下几点：

效率高；

可以扩展换 Url，换字段；

elective 是跟在一堆空值后面，要效率较高的排除掉前面的匹配；

匹配完 elective 的值之后， & 后面的匹配需要立刻停止，减少性能消耗；

第三个的 Url 中带了 ,，也要考虑其他符号的可能性。

2.1 方案一

function getUrlValue(url){
  if(!url) return;
  // let res = url.match(/(?<=elective=)(d+(,d+)*)/);
  // let res = /(?<=elective=)(d+(.d)*)/g.exec(url);
  let res = url.match(/(?<=elective=)(d+(,d+)*)/);
  return res ? res[0].split(",") : [];
}

其中：这个正则表达式 <=是零宽度断言的写法，断言 elective=有无内容，是匹配elective=的字符的，(?<=elective=) 是指匹配以elective=开头的字符串；
(d+(.d)*)指匹配数字开头，可能不定数量逗号分隔后是数字的字符串。

2.2 方案二

function getQueryFromUrl(key, url) {
  const matches = url.match(new RegExp(`(?|&)${key}=([^&]*)(&|$)`));
  return !matches || matches.length <= 0 ? [] : (matches[2] ? matches[2].split(",") : []);
}
getQueryFromUrl("elective" , url_1)

2.3 方案三

IE 不支持。

function getParamsUrl(url) {
  var res = new URLSearchParams(url).get("elective");
  return res ? res.split(",") : []; 
}

文章来自：Daily-Interview-Question：第10题编程题
正则资料可参考：陈水水的个人博客正则表达式

更多文章分享：https://www.artroy.com.cn/

GPU云服务器云服务器 cdn常见面试问题加皮肤后的诡异问题 java的常见问题面试php需要的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110289.html

前端面试题收集，持续更新中

摘要：对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些？常见的浏览器内核有哪些？介绍一下你对浏览器内核的理解？...

kgbook 2019-08-22 16:49 评论0 收藏0
前端面试题收集，持续更新中

摘要：对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些？常见的浏览器内核有哪些？介绍一下你对浏览器内核的理解？...

2json 2019-08-29 15:12 评论0 收藏0
前端面试题收集，持续更新中

摘要：对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些？常见的浏览器内核有哪些？介绍一下你对浏览器内核的理解？...

adam1q84 2019-08-02 10:17 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

li21 2019-08-23 17:11 评论0 收藏0