1. 如何获取URL?
const getBaseURL = url => url.replace(/[?#].*$/, '');
getBaseURL('http://url.com/page?name=Adam&surname=Smith');
2. 如何检查URL是否是绝对的?
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
isAbsoluteURL('https://google.com');
isAbsoluteURL('ftp://www.myserver.net');
isAbsoluteURL('/foo/bar');
3. 如何获取URL参数作为对象?
const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => (
(a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
),
{}
);
getURLParameters('google.com');
getURLParameters('http://url.com/page?name=Adam&surname=Smith');
4. 如何检查元素是否包含另一个元素?
const elementContains = (parent, child) =>
parent !== child && parent.contains(child);
elementContains(
document.querySelector('head'),
document.querySelector('title')
);
elementContains(document.querySelector('body'), document.querySelector('body'));
5.如何获取元素的所有祖先?
const getAncestors = el => {
let ancestors = [];
while (el) {
ancestors.unshift(el);
el = el.parentNode;
}
return ancestors;
};
getAncestors(document.querySelector('nav'));
6. 如何平滑滚动元素到视图中?
const smoothScroll = element =>
document.querySelector(element).scrollIntoView({
behavior: 'smooth'
});
smoothScroll('#fooBar');
smoothScroll('.fooBar');
7. 如何处理元素外的点击?
const onClickOutside = (element, callback) => {
document.addEventListener('click', e => {
if (!element.contains(e.target)) callback();
});
};
onClickOutside('#my-element', () => console.log('Hello'));
8. 如何生成UUID?
const UUIDGeneratorBrowser = () =>
([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
UUIDGeneratorBrowser();
9. 如何获取选中的文本?
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
10.如何复制文本到剪贴板?
const copyToClipboard = str => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
return navigator.clipboard.writeText(str);
return Promise.reject('The Clipboard API is not available.');
};
11. 如何给HTML元素添加样式?
const addStyles = (el, styles) => Object.assign(el.style, styles);
addStyles(document.getElementById('my-element'), {
background: 'red',
color: '#ffff00',
fontSize: '3rem'
});
12. 如何切换全屏模式?
const fullscreen = (mode = true, el = 'body') =>
mode
? document.querySelector(el).requestFullscreen()
: document.exitFullscreen();
fullscreen();
fullscreen(false);
13. 如何检测Caps Lock是否打开?
<form>
<label for="username">Username:</label>
<input id="username" name="username">
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<span id="password-message" style="display: none">Caps Lock is on</span>
</form>
const el = document.getElementById('password');
const msg = document.getElementById('password-message');
el.addEventListener('keyup', e => {
msg.style = e.getModifierState('CapsLock')
? 'display: block'
: 'display: none';
});
14. 如何检查日期是否有效?
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid('December 17, 1995 03:24:00');
isDateValid('1995-12-17T03:24:00');
isDateValid('1995-12-17 T03:24:00');
isDateValid('Duck');
isDateValid(1995, 11, 17);
isDateValid(1995, 11, 17, 'Duck');
isDateValid({});
15. 如何从 Date 中获取冒号时间?
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date());
16. 如何查看当前用户的首选语言?
const detectLanguage = (defaultLang = 'en-US') =>
navigator.language ||
(Array.isArray(navigator.languages) && navigator.languages[0]) ||
defaultLang;
detectLanguage();
17. 如何查看用户喜欢的配色方案?
const prefersDarkColorScheme = () =>
window &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
prefersDarkColorScheme();
18. 如何检查设备是否支持触摸事件?
const supportsTouchEvents = () =>
window && 'ontouchstart' in window;
supportsTouchEvents();
19. URL对象
const url = new URL("https://example.com/login?user=someguy&page=news");
url.origin
url.host
url.protocol
url.pathname
url.searchParams.get('user')