在我们的开发人员工作流程中，我们经常遇到具有挑战性的问题，可能只需要几行代码就可以解决。
在今天文章中，我将分享19个有用的JS代码片段，这些代码片段可以在您处理 URL、DOM、事件、日期、用户首选项等时为您提供帮助。
现在开始吧。
1. 如何获取URL？
const getBaseURL = url => url.replace(/[?#].*$/, '');
getBaseURL('http://url.com/page?name=Adam&surname=Smith');// 'http://url.com/page'
2. 如何检查URL是否是绝对的？
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);
isAbsoluteURL('https://google.com'); // trueisAbsoluteURL('ftp://www.myserver.net'); // trueisAbsoluteURL('/foo/bar'); // false
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');// {name: 'Adam', surname: 'Smith'}
4. 如何检查元素是否包含另一个元素？
const elementContains = (parent, child) => parent !== child && parent.contains(child);
elementContains( document.querySelector('head'), document.querySelector('title'));// trueelementContains(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'));// [document, html, body, header, nav]
6. 如何平滑滚动元素到视图中？
const smoothScroll = element => document.querySelector(element).scrollIntoView({ behavior: 'smooth' });
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBarsmoothScroll('.fooBar');// scrolls smoothly to the first element with a class of fooBar
7. 如何处理元素外的点击？
const onClickOutside = (element, callback) => { document.addEventListener('click', e => { if (!element.contains(e.target)) callback(); });};
onClickOutside('#my-element', () => console.log('Hello'));// Will log 'Hello' whenever the user clicks outside of #my-element
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(); // '7982fcfe-5721-4632-bede-6000885be57d'
9. 如何获取选中的文本？
const getSelectedText = () => window.getSelection().toString();
getSelectedText(); // 'Lorem ipsum'
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(); // Opens `body` in fullscreen modefullscreen(false); // Exits fullscreen mode
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'); // trueisDateValid('1995-12-17T03:24:00'); // trueisDateValid('1995-12-17 T03:24:00'); // falseisDateValid('Duck'); // falseisDateValid(1995, 11, 17); // trueisDateValid(1995, 11, 17, 'Duck'); // falseisDateValid({}); // false
15. 如何从 Date 中获取冒号时间？
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // '08:38:00'
16. 如何查看当前用户的首选语言？
const detectLanguage = (defaultLang = 'en-US') => navigator.language || (Array.isArray(navigator.languages) && navigator.languages[0]) || defaultLang;
detectLanguage(); // 'nl-NL'
17. 如何查看用户喜欢的配色方案？
const prefersDarkColorScheme = () => window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
prefersDarkColorScheme(); // true
18. 如何检查设备是否支持触摸事件？
const supportsTouchEvents = () => window && 'ontouchstart' in window;
supportsTouchEvents(); // true
19. URL对象
const url = new URL("https://example.com/login?user=someguy&page=news");
url.origin// "https://example.com"url.host// "example.com"url.protocol// "https:"url.pathname// "/login"url.searchParams.get('user')// "someguy"
总结
以上就是我今天与你分享的全部内容，希望对你有所帮助，最后，感谢你的阅读，祝编程愉快！
该文章在 2024/10/14 10:19:47 编辑过
400 186 1886
