第 105 题：编程题 匹配查找特定字符串

Question

url 有三种情况

https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33
https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33
https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33

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

[] || ['800'] || ['800','700']

Answer 1

function getUrlValue(url, param) {
	let query = url.split('?')[1]
	if(query) {
		let m = query.split('&')
		for(let i = 0; i<m.length; i++){
			let n = m[i].split('=')
			if(n[0] === param) { 
				return n[1] 
                        }
		}
	}
	return undefined
}

Answer 2

模拟第一位大佬的做法
var getUrlValue = function（urls）{
if（！urls）return;
let tempRes = /（？<= select =）（〜d+（。 d）*）/ g.exec（urls）;
返回tempRes？tempRes [0] .split（'，'）：[]
}

正则里写的是啥意思啊，好炫，看不懂

Answer 3

这么写好搓啊，高级的不会，哈哈哈

/*url有三种情况
      https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33
      https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33
      https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33
      匹配elective后的数字输出（写出你认为的最优解法）:
      [] || ['800'] || ['800','700']*/
      let url =
        'https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=22,44&local_province_id=33'
      function getElective(url, key) {
        let str = url.slice(url.indexOf(key) + ++key.length)
        let res = str.indexOf('&') > -1 ? str.split('&')[0] : str
        if (res === '') return []
        return res.indexOf(',') > -1 ? res.split(',') : [res]
      }
      let res = getElective(url, 'elective')
      console.log(res)

Answer 4

有没有大佬解释下第一位给的正则啊？看不懂呀

Answer 5

有没有大佬解释下第一位给的正则啊？看不懂呀
(/(?<=elective=)(d+(,d+))/）
其中：（?<=elective=） 是指匹配以elective=开头的字符串；
（d+(, d+))指匹配数字开头，可能不定数量逗号分隔后是数字的字符串。

Answer 6

function getUrlValue(url, targetKey) {
    if (!url || !targetKey) return []

    let reg = new RegExp(`&?${targetKey}=(\d*,?)*&?`)
    let matchStr = reg.exec(url)
    let val = matchStr.length && matchStr[0].replace(/&/g,'').split('=').length >= 2 ? matchStr[0].replace(/&/g,'').split('=')[1] : ''
    return val ? val.split(',') : []
}

Answer 7

用Url对象是开挂了。其实还可以创建a标签直接搞，也是类似Url对象的效果。用原始的正则也很简单

function getQueryFromUrl(key, url) {
  const matches = url.match(new RegExp(`(\?|&)${key}=([^&]*)(&|$)`));
  return !matches ? [] : matches[2].split(',');
}

getQueryFromUrl('elective' , 'https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33')

Answer 8

function getQueryParam(queryString) { // 默认必有elective字段
  const electiveString  = queryString
    .split("&")
    .filter(str => str.includes('elective='))[0]
  const result  = electiveString
    .split("=")[1] // value
    .split(',') 
    .filter(item => item) 
  return result 
}

Answer 9

https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=700,800&local_province_id=33

Answer 10

// 匹配url后面的关于某字段的值
export async function getUrlParam(url = "", param = "") {
  let result = "";

  // 比如取得"name"这个字段的参数
  if (!url || !param) {
    return "";
  }

  // 方法一 result = new URLSearchParams(url).get(param); // 内置api方法实现

  // 方法二
  let _a =
    url.split("?").length > 1
      ? url
          .replace("?", "?&")
          .split("?")
          .join()
          .replace(/&/g, "&&&")
          .split("&&")
      : [url]; // 这里取数组第一个参数后的内容
  _a.length > 1 ? (_a = _a.slice(1)) : (_a = []);
  _a.forEach(item => {
    if (item.indexOf(param + "=") > -1) {
      result = item.split("=")[1];
    }
  });
  return result.split(",").length === 1 ?  (result.split(",")[0] === "" ? [] :  result.split(",")) :  result.split(",");
}

Answer 11

var getParams=function(url,{data='elective'}={}){
let params = url.split(data+'=')[1];
if(params == undefined) return undefined;
let val = params.split('&')[0];
return val==''?[]:val.split(',');
}

Answer 12

function getword(url,word){
var test =new RegExp(word+'=([^&]*)(&|$)');
var ele = url.match(test)[1];
return ele?ele.split(","):[];
}
啥是大厂，没进去过。可能有以下需求：
1.可以扩展换url，换字段；
2.要快；
3.还得防止各种报错

Answer 13

 let ur =  new URLSearchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33').get('elective')

这个很厉害，有又学到一招

这个正则表达式

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

这个正则表达式<=是零宽度断言的写法，断言 elective=有无内容，是匹配elective=的字符的

Answer 14

const getUrlValue = (url, key) => {
const reg = new RegExp((?<=${key}=)([^&]*)(?=&));
const result = url.match(reg);
return result ? result[1] : result;
}

Answer 15

get了，URLSearchParams这个API是好API

Answer 16

 new URLSearchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33').get('elective')

IE浏览器不支持呀

Answer 17

function trans(str){
let arr = str.split("?")[1].split("&");
for(let i = 0 ; i< arr.length; i++){
if(arr[i].split("=")[0]==="elective"){
target = arr[i].split("=")[1];
}
}
return target.split(",");
}

Answer 18

可惜啊，大部分公司要兼容到ie11

Answer 19

模仿第一位大佬的做法
var getUrlValue = function (urls) {
if (!urls) return;
let tempRes = /(?<=elective=)(d+(.d)*)/g.exec(urls);
return tempRes ? tempRes[0].split(',') : []
}

Answer 20

`
function searchParams(url) {
const searchParams = new URLSearchParams(url)
const getElective = searchParams.get('elective')

if(getElective) {
	return getElective.split(',').filter(item => item)
} else {
	return []
}

}
searchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33') // []
searchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33') // ["800"]
searchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33') // ["800","700"]
`

棒

Answer 21

const urls = [
"https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33",
"https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33",
"https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33",
];
urls.forEach(url => {
console.log(new URLSearchParams(url).get('elective').split(','));
});

Answer 22

function searchParams(url) {
	const searchParams = new URLSearchParams(url)
	const getElective = searchParams.get('elective')

	if(getElective) {
		return getElective.split(',').filter(item => item)
	} else {
		return []
	}
}
searchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33') // []
searchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33') // ["800"]
searchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33') // ["800","700"]

Answer 23

Answer 24

new URL
("https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=700,800&local_province_id=33")
.searchParams.get("elective")
.split(",")
.filter(e=>e)
.map(e=>e)

Answer 25

 new URLSearchParams('https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33').get('elective')

Answer 26

考虑到是大厂级别的前端要求，有这么几点：
1，elective是跟在一堆空值后面，所以要效率最高的排除掉前面的匹配。
2，在匹配完elective的值之后，&后面的匹配就需要立刻停止，停止性能消耗
3，第三个的值中带了逗号，也要考虑其他符号的可能性。

Answer 27

const urls = [
  "https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33",
  "https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33",
  "https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33",
];

function getElective(url) {
  const reg = new RegExp("(^|&)elective=([^&]*)(&|$)", "i");
  const r = url.substr(1).match(reg);

  if (r != null) {
    return r[2] ? r[2].split(",") : [];
  }

  return [];
}

urls.forEach((url) => {
  const result = getElective(url);
  console.log(result, "---result");
});

Answer 28

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