Недавно дополнял базовые знания и увидел вопрос на собеседовании.передача адреса нажмите здесь:
Тема: Анализ полного URL-адреса и возврат объекта, содержащего тот же домен, что и window.location
Отвечать:
/**
* 解析一个url并生成window.location对象中包含的域
* location:
* {
* href: '包含完整的url',
* origin: '包含协议到pathname之前的内容',
* protocol: 'url使用的协议，包含末尾的:',
* username: '用户名', // 暂时不支持
* password: '密码', // 暂时不支持
* host: '完整主机名，包含:和端口',
* hostname: '主机名，不包含端口'
* port: '端口号',
* pathname: '服务器上访问资源的路径/开头',
* search: 'query string，?开头',
* hash: '#开头的fragment identifier'
* }
*
* @param {string} url 需要解析的url
* @return {Object} 包含url信息的对象
*/
function parseUrl(url) {
var result = {};
var keys = ['href', 'origin', 'protocol', 'host',
'hostname', 'port', 'pathname', 'search', 'hash'];
var i, len;
var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/;
var match = regexp.exec(url);
console.info('match=', match);
if (match) {
for (i = keys.length - 1; i >= 0; --i) {
result[keys[i]] = match[i] ? match[i] : '';
}
}
console.info('result=', result);
return result;
}
parseUrl("http://test.com:8080?name=1&password=2#page1");
结果：
match=[
'http://test.com:8080?name=1&password=2#page1',
'http://test.com:8080',
'http:',
'test.com:8080',
'test.com',
':8080',
undefined,
'?name=1&password=2',
'#page1',
index: 0,
input: 'http://test.com:8080?name=1&password=2#page1'
]
result={
hash: '#page1',
search: '?name=1&password=2',
pathname: '',
port: ':8080',
hostname: 'test.com',
host: 'test.com:8080',
protocol: 'http:',
origin: 'http://test.com:8080',
href: 'http://test.com:8080?name=1&password=2#page1'
}
Да, на первый взгляд непонятная часть — это регулярное выражение:
/(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/
Я только недавно прочитал книгу Proficient in Regular Expressions (20% из них, ха-ха, я не могу прочитать их все), и я могу просто потренировать свои руки.
1. Длина сопоставленного массива равна 11, почему
2. Как каждый из них соответствует?
Прежде всего, перед разбором я заполню для вас базовые понятия, а те, которые вы знаете, пропущу.
?: 匹配0个或一个
* 匹配0个或多个,
+: 一次或多次，至少出现一次
.* 贪婪匹配：在满足匹配时，匹配尽可能长的字符串，默认情况下，采用贪婪匹配（没有问号）
// 非贪婪匹配：在满足匹配时，匹配尽可能短的字符串，使用?来表示非贪婪匹配
? 非贪婪，最小匹配（重点，后面会用到）
*? 重复任意次，但尽可能少重复
+? 重复1次或更多次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
{n,m}? 重复n到m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复
//环视
'jeffs'.replace(/(?<=jeff)(?=s)/i, '"')
//顺序环视和逆向环视,?= 匹配的目标位置后紧跟s,匹配的目标位置前紧邻jeff jeff目标s，结果输出：jeff"s
[^]: ^表示非 //示例：[^u]
//[]里面的元字符只是普通字符
/03[-./]22/.test('03-22') 结果输出：true
//() ：标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用
Заходя в тему, длина совпадающего массива 11, почему?
Поскольку результат сопоставления определяется количеством и порядком (), фокус находится на переднем 9
Последние два [index: 0, input: 'http://test.com:8080?name=1&password=2#page1'] возвращаются функцией regexp.exec.
Таким образом, приведенное выше выражение можно разбить на следующие подвыражения:
(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?
(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))
([^:]+:)
(([^:\/\?#]+)(:\d+)?)
([^:\/\?#]+)
(:\d+)?
(\/[^?#]*)?
(\?[^#]*)?
(#.*)?
Конкретный анализ показан на следующем рисунке:
Вопросы для размышления:
正则表达式分割之千分符格式：
213435324.099.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
Я здесь сегодня, если тебе понравилось, не забудь поставить лайк~