cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/26850.html ADDED
@@ -0,0 +1,138 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>Chrome 神器，这些神奇的技巧你用过没？ | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">Chrome 神器，这些神奇的技巧你用过没？</h1><div class="post-meta"><span class="date">2020-01-19</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 1.5k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 5</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/26850.html#vcomment"><span class="waline-comment-count" data-path="/article/26850.html"></span><span> 条评论</span></a><div class="post-content"><p><code>来源：点滴前端 作者：徐月超 原文地址：https://mp.weixin.qq.com/s/om1h4ghWay9kAUT8TVAjcw</code><br>谷歌开发者工具是前端日常不可缺少的神器，写布局，找 bug，优化加载速度统统靠他。但是你真的了解他么？这篇文章是专门介绍谷歌浏览器各种好用小技巧的。不是什么长篇大论，旨在提高你的开发效率，早日完工回家陪女朋友。</p>
20
+ <span id="more"></span>
21
+
22
+ <h2 id="应该了解的快捷键"><a href="#应该了解的快捷键" class="headerlink" title="应该了解的快捷键"></a><strong>应该了解的快捷键</strong></h2><ol>
23
+ <li><p>放大内容 CTRL + +</p>
24
+ </li>
25
+ <li><p>缩小内容 CTRL + -</p>
26
+ </li>
27
+ <li><p>回到正常大小 CTRL + 0</p>
28
+ </li>
29
+ <li><p>标签页切换 CTRL + 1<del>9 (1</del>9 分别代表第一个标签，第二个标签…)</p>
30
+ </li>
31
+ <li><p>打开新的标签 CTRL + T</p>
32
+ </li>
33
+ <li><p>搜索内容 CTRL + F</p>
34
+ </li>
35
+ <li><p>回到上一页 CTRL + 左箭头</p>
36
+ </li>
37
+ <li><p>回到下一页 CTRL + 右箭头</p>
38
+ </li>
39
+ <li><p>打开开发者工具 F12 MAC command + shift + i</p>
40
+ </li>
41
+ </ol>
42
+ <p>另外一个小知识就是设置搜索引擎了，直接在地址栏中输入内容搜索内容。</p>
43
+ <p><img src="https://mmbiz.qpic.cn/mmbiz_png/Vd7cGh7KJWwz4jTCGicacrDOvjksGt3YA1ZIIzREcIV2VBs86euCLowaUMibAjQOk7urMowpcVgO1uh8zepfBfgQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"></p>
44
+ <p>我用的 Bing 的搜索引擎：设置方式也很简单： 打开设置 -&gt; 搜索引擎 -&gt; 切换想要搜索引擎</p>
45
+ <p><img src="https://mmbiz.qpic.cn/mmbiz_png/Vd7cGh7KJWwz4jTCGicacrDOvjksGt3YAeYCqiaSSWnYl7IABSyznMetOuC6Vdxqw6GkLxJqc0V04fRjiaMgz7E9g/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"></p>
46
+ <p><strong>Elements 中的的常用技巧</strong></p>
47
+ <h3 id="1-快速查看元素的快捷键-CTRL-SHIFT-C"><a href="#1-快速查看元素的快捷键-CTRL-SHIFT-C" class="headerlink" title="1.快速查看元素的快捷键 CTRL + SHIFT + C"></a><strong>1.快速查看元素的快捷键 CTRL + SHIFT + C</strong></h3><p>每次选一个元素先去右上角点一下鼠标选元素状态，在我这里不存在的。直接快捷键 CTRL + SHIFT + C 选中你想要的元素</p>
48
+ <h3 id="2-想查看鼠标经过的元素的样式"><a href="#2-想查看鼠标经过的元素的样式" class="headerlink" title="2.想查看鼠标经过的元素的样式"></a><strong>2.想查看鼠标经过的元素的样式</strong></h3><p>鼠标经过的样式并不会直接在 Stylus 上显示出来，需要鼠标移入才会出来。这样就没办法修改样式。这里就需要俩个技巧了</p>
49
+ <p><strong>1.单击上图中的 :hov 按钮会出来 force element state。****然后打钩就可以了。</strong></p>
50
+ <p><img src="https://mmbiz.qpic.cn/mmbiz_png/Vd7cGh7KJWwz4jTCGicacrDOvjksGt3YAEm26mvbgNXQIJnbfwOs8xXghdiasDJb86sue3K8sLDMAmru2RpfWYrA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"></p>
51
+ <ol start="2">
52
+ <li>直接在 Elements 中右键选择 Force state 也是可以的。</li>
53
+ </ol>
54
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
55
+ <h2 id="Console-中的的常用技巧"><a href="#Console-中的的常用技巧" class="headerlink" title="Console 中的的常用技巧"></a><strong>Console 中的的常用技巧</strong></h2><p>console 直接提供了命令行运行 js 的条件，强大的提示功能，想不起来哪个单词怎么写了直接命令行输入就会出来一片一片的提示。想看某个对象的方法比起你去百度要快多了。必备技能啊</p>
56
+ <p>上图中展示了字符串中的方法</p>
57
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
58
+ <p><strong>1.浏览器支持直接使用 jQuery 的方式直接获取元素例如：</strong><strong>$(“body”)</strong></p>
59
+ <p>这个有一个妙用，比如说改标签的内容，你直接在 Elements 里面改非常不方便，但是你如果只把你需要的一部分拿出来改是不是就很爽了呢。</p>
60
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
61
+ <p>**<br>**</p>
62
+ <p><strong>2.打印的东西太多，直接使用 clear() 函数清理掉</strong></p>
63
+ <p>**<br>**</p>
64
+ <h3 id="3-使用”-“-“-“-“-“-进行换行"><a href="#3-使用”-“-“-“-“-“-进行换行" class="headerlink" title="3. 使用” [ “ “ { “ “ . “ 进行换行"></a><strong>3. 使用” [ “ “ { “ “ . “ 进行换行</strong></h3><p>**<br>**</p>
65
+ <h2 id="Network-中常用的技巧"><a href="#Network-中常用的技巧" class="headerlink" title="Network 中常用的技巧"></a><strong>Network 中常用的技巧</strong></h2><p>这个是我日常工作中使用频率最高的，像数据不对后台要请求报文，查看数据格式，看代码加载时间等等。</p>
66
+ <h3 id="1-如何只看前后端交互的请求？"><a href="#1-如何只看前后端交互的请求？" class="headerlink" title="1.如何只看前后端交互的请求？"></a><strong>1.如何只看前后端交互的请求？</strong></h3><p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
67
+ <p>上图中的分类能够最简单的将请求进行分类，XHR 就是前后端之间的请求了，属于重度使用对象。其他的还有看 CSS, JS，Img 等等。</p>
68
+ <p>要在高级一些就是 filter 了支持内容过滤，请求头过滤。</p>
69
+ <h3 id="2-对于单击某个按钮就跳转新的页面的情况如何查看上个页面的请求？"><a href="#2-对于单击某个按钮就跳转新的页面的情况如何查看上个页面的请求？" class="headerlink" title="2.对于单击某个按钮就跳转新的页面的情况如何查看上个页面的请求？"></a><strong>2.对于单击某个按钮就跳转新的页面的情况如何查看上个页面的请求？</strong></h3><p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
70
+ <h3 id="Preserve-log-了解一下。勾上了他不管你怎么刷新页面，里面的记录都不会消失了。"><a href="#Preserve-log-了解一下。勾上了他不管你怎么刷新页面，里面的记录都不会消失了。" class="headerlink" title="Preserve log 了解一下。勾上了他不管你怎么刷新页面，里面的记录都不会消失了。"></a>Preserve log 了解一下。勾上了他不管你怎么刷新页面，里面的记录都不会消失了。</h3><h3 id=""><a href="#" class="headerlink" title=""></a></h3><h3 id="3-接口缓存清理，但请不要清理掉我的密码记录"><a href="#3-接口缓存清理，但请不要清理掉我的密码记录" class="headerlink" title="3.接口缓存清理，但请不要清理掉我的密码记录"></a><strong>3.接口缓存清理，但请不要清理掉我的密码记录</strong></h3><p>还是上图，Preserve log 旁边有个 Disable cache 选中它就能够不缓存请求数据了。当然这还远远不够，因为有时候你还需要清除 session，cookiey等等缓存。在打开控制台的情况下，右键刷新按钮有个 清空缓存并硬性重新加载的选项，它能够还你一个初次打开的页面哦。</p>
71
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
72
+ <h3 id="-1"><a href="#-1" class="headerlink" title=""></a></h3><h3 id="4-快速获取地址栏链接，上面还有很多其他信息的获取方式。-可以多看看！"><a href="#4-快速获取地址栏链接，上面还有很多其他信息的获取方式。-可以多看看！" class="headerlink" title="4.快速获取地址栏链接，上面还有很多其他信息的获取方式。****可以多看看！"></a><strong>4.快速获取地址栏链接，上面还有很多其他信息的获取方式。****可以多看看！</strong></h3><p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
73
+ <p>**<br>**</p>
74
+ <h2 id="Application-的常用技巧"><a href="#Application-的常用技巧" class="headerlink" title="Application 的常用技巧"></a><strong>Application 的常用技巧</strong></h2><p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
75
+ <h2 id="从图中可以看到这是一个专门看各种缓存的地方。想知道自己的缓存存储的情况，甚至修改缓存值调试代码，这里都要方便的多"><a href="#从图中可以看到这是一个专门看各种缓存的地方。想知道自己的缓存存储的情况，甚至修改缓存值调试代码，这里都要方便的多" class="headerlink" title="从图中可以看到这是一个专门看各种缓存的地方。想知道自己的缓存存储的情况，甚至修改缓存值调试代码，这里都要方便的多"></a>从图中可以看到这是一个专门看各种缓存的地方。想知道自己的缓存存储的情况，甚至修改缓存值调试代码，这里都要方便的多</h2><h2 id="-2"><a href="#-2" class="headerlink" title=""></a></h2><h2 id="Source-的常用技巧"><a href="#Source-的常用技巧" class="headerlink" title="Source 的常用技巧"></a><strong>Source 的常用技巧</strong></h2><p>Source 是专门放资源的地方，在这里可以看到整个页面都用到了哪些资源</p>
76
+ <h3 id="1-压缩的代码格式化。"><a href="#1-压缩的代码格式化。" class="headerlink" title="1.压缩的代码格式化。"></a><strong>1.压缩的代码格式化。</strong></h3><p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
77
+ <h3 id="点一下这个-大括号-瞬间以你能读的格式展示出来。从此再也不用复制粘贴到编辑器里面格式化了。"><a href="#点一下这个-大括号-瞬间以你能读的格式展示出来。从此再也不用复制粘贴到编辑器里面格式化了。" class="headerlink" title="点一下这个 大括号 瞬间以你能读的格式展示出来。从此再也不用复制粘贴到编辑器里面格式化了。"></a>点一下这个 大括号 瞬间以你能读的格式展示出来。从此再也不用复制粘贴到编辑器里面格式化了。</h3><h3 id="2-代码调试"><a href="#2-代码调试" class="headerlink" title="2.代码调试"></a><strong>2.代码调试</strong></h3><p>console 打印局部变量，查看代码执行顺序其实还是蛮好用的。但是放到循环循环语句里面给你打印出来你能理解的了么？因此打断点就很重要了。name如何打断点呢？这里有俩种方法：</p>
78
+ <p><strong>1. 代码中加入 debugger。****打开控制台代码执行到这里的时候自然就会进入断点模式，不打开控制台是不会进来的。</strong></p>
79
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
80
+ <p><strong>2.在 Source 中打断点</strong></p>
81
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
82
+ <p>找到你要打断点的那一行，在左边行号这一点就打上断点了，很简单。甚至可以设置条件断点：右键这个小箭头可以看到有个 Edit breakpoint 。就可以给断点设置进入条件。比如 i&#x3D;5 。就代表 i &#x3D; 5 的时候才会进入断点。</p>
83
+ <p><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
84
+ <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a><strong>总结</strong></h2><p>文中涉及的内容都是比较常用的，没有列举很多感觉比较牛逼。但是实际操作的时候却很少用的功能，如果想了解的更多更全面可以查看谷歌开发者工具的中文翻译文档：</p>
85
+ <p><a target="_blank" rel="noopener" href="https://www.html.cn/doc/chrome-devtools/">https://www.html.cn/doc/chrome-devtools/</a></p>
86
+ <p>如果你想了解更多的骚技巧可以看这俩篇文章：</p>
87
+ <p><a target="_blank" rel="noopener" href="https://juejin.im/post/5af53823f265da0b75282b0f">https://juejin.im/post/5af53823f265da0b75282b0f</a></p>
88
+ <p><a target="_blank" rel="noopener" href="https://umaar.com/dev-tips/">https://umaar.com/dev-tips/</a></p>
89
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/26850.html">https://xuehuayu.cn/article/26850.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/28976.html">阿里 P6 大佬的面经，送给在面试或学习路上的小伙伴们</a><a class="next" href="/article/45157.html">新型肺炎疫情最新动态播报汇总</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
90
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
91
+ const locale = {
92
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
93
+ sofa: '沙发空缺中，还不快抢~',
94
+ };
95
+ Waline.init({
96
+ el: '#vcomment',
97
+ serverURL: serverURL,
98
+ pageSize: '20',
99
+ visitor: true, // 阅读量统计
100
+ requiredMeta: ['nick', 'mail'],
101
+ emoji: [
102
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
103
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
104
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
105
+ ],
106
+ locale,
107
+ pageview: true
108
+ })
109
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
110
+ var val = $(this).val()
111
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
112
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
113
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
114
+
115
+ if (val === 'self') {
116
+ $('#search').html(self)
117
+ var search_path = 'search.xml';
118
+ if (search_path.length == 0) {
119
+ search_path = 'search.xml';
120
+ }
121
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
122
+ searchFunc(path, 'local-search-input', 'local-search-result');
123
+ } else if (val === 'baidu') {
124
+ $('#search').html(baidu)
125
+ } else if (val === 'google') {
126
+ $('#search').html(google)
127
+ }
128
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
129
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
130
+ if (cnb) {
131
+ var gxba =document.getElementById('gxba')
132
+ var gaba =document.getElementById('gaba')
133
+ var gabaLink =document.getElementById('gaba-link')
134
+ gxba.innerText ='京ICP备20007647号-1'
135
+ gaba.innerText ='京公网安备 11010802031254号'
136
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
137
+ }
138
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>
package/article/26940.html ADDED
@@ -0,0 +1,258 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>javascript常用正则表达式备忘录 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">javascript常用正则表达式备忘录</h1><div class="post-meta"><span class="date">2019-10-31</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E6%AD%A3%E5%88%99/">正则 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 1.4k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 6</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/26940.html#vcomment"><span class="waline-comment-count" data-path="/article/26940.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://mp.weixin.qq.com/s/yxISZj_QvQSFXBv5mUNUMQ</code></p>
20
+ <p>正则表达式或“regex”用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单。</p>
21
+ <span id="more"></span>
22
+ <p><img src="https://img.php.cn/upload/article/000/000/006/5daa720489ab4629.jpg" alt="xuehuayu.cn"></p>
23
+ <h2 id="匹配正则"><a href="#匹配正则" class="headerlink" title="匹配正则"></a>匹配正则</h2><p>使用 <code>.test()</code> 方法</p>
24
+ <pre><code>let testString = &quot;My test string&quot;;
25
+ let testRegex = /string/;
26
+ testRegex.test(testString);
27
+ </code></pre>
28
+ <h2 id="匹配多个模式"><a href="#匹配多个模式" class="headerlink" title="匹配多个模式"></a>匹配多个模式</h2><p>使用OR运算符（<code>|</code>）</p>
29
+ <pre><code>const regex = /yes|no|maybe/;
30
+ </code></pre>
31
+ <h2 id="忽略大小写"><a href="#忽略大小写" class="headerlink" title="忽略大小写"></a>忽略大小写</h2><p>使用<code>i</code>标志表示忽略大小写</p>
32
+ <pre><code>const caseInsensitiveRegex = /ignore case/i;
33
+ const testString = &#39;We use the i flag to iGnOrE CasE&#39;;
34
+ caseInsensitiveRegex.test(testString); // true
35
+ </code></pre>
36
+ <h2 id="提取变量的第一个匹配项"><a href="#提取变量的第一个匹配项" class="headerlink" title="提取变量的第一个匹配项"></a>提取变量的第一个匹配项</h2><p>使用 <code>.match()</code> 方法</p>
37
+ <pre><code>const match = &quot;Hello World!&quot;.match(/hello/i); // &quot;Hello&quot;
38
+ </code></pre>
39
+ <h2 id="提取数组中的所有匹配项"><a href="#提取数组中的所有匹配项" class="headerlink" title="提取数组中的所有匹配项"></a>提取数组中的所有匹配项</h2><p>使用 <code>g</code> 标志</p>
40
+ <pre><code>const testString = &quot;Repeat repeat rePeAT&quot;;
41
+ const regexWithAllMatches = /Repeat/gi;
42
+ testString.match(regexWithAllMatches); // [&quot;Repeat&quot;, &quot;repeat&quot;, &quot;rePeAT&quot;]
43
+ </code></pre>
44
+ <h2 id="匹配任意字符"><a href="#匹配任意字符" class="headerlink" title="匹配任意字符"></a>匹配任意字符</h2><p>使用通配符<code>.</code> 作为任何字符的占位符</p>
45
+ <pre><code>// To match &quot;cat&quot;, &quot;BAT&quot;, &quot;fAT&quot;, &quot;mat&quot;
46
+ const regexWithWildcard = /.at/gi;
47
+ const testString = &quot;cat BAT cupcake fAT mat dog&quot;;
48
+ const allMatchingWords = testString.match(regexWithWildcard); // [&quot;cat&quot;, &quot;BAT&quot;, &quot;fAT&quot;, &quot;mat&quot;]
49
+ </code></pre>
50
+ <h2 id="用多种可能性匹配单个字符"><a href="#用多种可能性匹配单个字符" class="headerlink" title="用多种可能性匹配单个字符"></a>用多种可能性匹配单个字符</h2><ul>
51
+ <li><p>使用字符类，你可以使用它来定义要匹配的一组字符</p>
52
+ </li>
53
+ <li><p>把它们放在方括号里 <code>[]</code></p>
54
+ <p> &#x2F;&#x2F;匹配 “cat” “fat” and “mat” 但不匹配 “bat”<br> const regexWithCharClass &#x3D; &#x2F;[cfm]at&#x2F;g;<br> const testString &#x3D; “cat fat bat mat”;<br> const allMatchingWords &#x3D; testString.match(regexWithCharClass); &#x2F;&#x2F; [“cat”, “fat”, “mat”]</p>
55
+ </li>
56
+ </ul>
57
+ <h2 id="匹配字母表中的字母"><a href="#匹配字母表中的字母" class="headerlink" title="匹配字母表中的字母"></a>匹配字母表中的字母</h2><p>使用字符集内的范围 <code>[a-z]</code></p>
58
+ <pre><code>const regexWidthCharRange = /[a-e]at/;
59
+
60
+ const regexWithCharRange = /[a-e]at/;
61
+ const catString = &quot;cat&quot;;
62
+ const batString = &quot;bat&quot;;
63
+ const fatString = &quot;fat&quot;;
64
+
65
+ regexWithCharRange.test(catString); // true
66
+ regexWithCharRange.test(batString); // true
67
+ regexWithCharRange.test(fatString); // false
68
+ </code></pre>
69
+ <h2 id="匹配特定的数字和字母"><a href="#匹配特定的数字和字母" class="headerlink" title="匹配特定的数字和字母"></a>匹配特定的数字和字母</h2><p>你还可以使用连字符来匹配数字</p>
70
+ <pre><code>const regexWithLetterAndNumberRange = /[a-z0-9]/ig;
71
+ const testString = &quot;Emma19382&quot;;
72
+ testString.match(regexWithLetterAndNumberRange) // true
73
+ </code></pre>
74
+ <h2 id="匹配单个未知字符"><a href="#匹配单个未知字符" class="headerlink" title="匹配单个未知字符"></a>匹配单个未知字符</h2><ul>
75
+ <li><p>要匹配您不想拥有的一组字符，请使用否定字符集</p>
76
+ </li>
77
+ <li><p>若要否定字符集，请使用插入符号<code>^</code></p>
78
+ <p> const allCharsNotVowels &#x3D; &#x2F;[^aeiou]&#x2F;gi;<br> const allCharsNotVowelsOrNumbers &#x3D; &#x2F;[^aeiou0-9]&#x2F;gi;</p>
79
+ </li>
80
+ </ul>
81
+ <h2 id="匹配一行中出现一次或多次的字符"><a href="#匹配一行中出现一次或多次的字符" class="headerlink" title="匹配一行中出现一次或多次的字符"></a>匹配一行中出现一次或多次的字符</h2><p>使用 <code>+</code> 符号</p>
82
+ <pre><code> const oneOrMoreAsRegex = /a+/gi;
83
+ const oneOrMoreSsRegex = /s+/gi;
84
+ const cityInFlorida = &quot;Tallahassee&quot;;
85
+
86
+ cityInFlorida.match(oneOrMoreAsRegex); // [&#39;a&#39;, &#39;a&#39;, &#39;a&#39;];
87
+ cityInFlorida.match(oneOrMoreSsRegex); // [&#39;ss&#39;];
88
+ </code></pre>
89
+ <h2 id="匹配连续出现零次或多次的字符"><a href="#匹配连续出现零次或多次的字符" class="headerlink" title="匹配连续出现零次或多次的字符"></a>匹配连续出现零次或多次的字符</h2><p>使用星号 <code>*</code></p>
90
+ <pre><code>const zeroOrMoreOsRegex = /hi*/gi;
91
+ const normalHi = &quot;hi&quot;;
92
+ const happyHi = &quot;hiiiiii&quot;;
93
+ const twoHis = &quot;hiihii&quot;;
94
+ const bye = &quot;bye&quot;;
95
+
96
+ normalHi.match(zeroOrMoreOsRegex); // [&quot;hi&quot;]
97
+ happyHi.match(zeroOrMoreOsRegex); // [&quot;hiiiiii&quot;]
98
+ twoHis.match(zeroOrMoreOsRegex); // [&quot;hii&quot;, &quot;hii&quot;]
99
+ bye.match(zeroOrMoreOsRegex); // null
100
+ </code></pre>
101
+ <h2 id="惰性匹配"><a href="#惰性匹配" class="headerlink" title="惰性匹配"></a>惰性匹配</h2><ul>
102
+ <li><p>字符串中与给定要求匹配的最小部分</p>
103
+ </li>
104
+ <li><p>默认情况下，正则表达式是贪婪的（匹配满足给定要求的字符串的最长部分）</p>
105
+ </li>
106
+ <li><p>使用 <code>?</code> 阻止贪婪模式(惰性匹配 )</p>
107
+ <p> const testString &#x3D; “catastrophe”;<br> const greedyRexex &#x3D; &#x2F;c[a-z]<em>t&#x2F;gi;<br> const lazyRegex &#x3D; &#x2F;c[a-z]</em>?t&#x2F;gi;</p>
108
+ <p> testString.match(greedyRexex); &#x2F;&#x2F; [“catast”]<br> testString.match(lazyRegex); &#x2F;&#x2F; [“cat”]</p>
109
+ </li>
110
+ </ul>
111
+ <h2 id="匹配起始字符串模式"><a href="#匹配起始字符串模式" class="headerlink" title="匹配起始字符串模式"></a>匹配起始字符串模式</h2><p>要测试字符串开头的字符匹配，请使用插入符号<code>^</code>，但要放大开头，不要放到字符集中</p>
112
+ <pre><code>const emmaAtFrontOfString = &quot;Emma likes cats a lot.&quot;;
113
+ const emmaNotAtFrontOfString = &quot;The cats Emma likes are fluffy.&quot;;
114
+ const startingStringRegex = /^Emma/;
115
+
116
+ startingStringRegex.test(emmaAtFrontOfString); // true
117
+ startingStringRegex.test(emmaNotAtFrontOfString); // false
118
+ </code></pre>
119
+ <h2 id="匹配结束字符串模式"><a href="#匹配结束字符串模式" class="headerlink" title="匹配结束字符串模式"></a>匹配结束字符串模式</h2><p>使用 <code>$</code> 来判断字符串是否是以规定的字符结尾</p>
120
+ <pre><code>const emmaAtBackOfString = &quot;The cats do not like Emma&quot;;
121
+ const emmaNotAtBackOfString = &quot;Emma loves the cats&quot;;
122
+ const startingStringRegex = /Emma$/;
123
+
124
+ startingStringRegex.test(emmaAtBackOfString); // true
125
+ startingStringRegex.test(emmaNotAtBackOfString); // false
126
+ </code></pre>
127
+ <h2 id="匹配所有字母和数字"><a href="#匹配所有字母和数字" class="headerlink" title="匹配所有字母和数字"></a>匹配所有字母和数字</h2><p>使用<code>\word</code> 简写</p>
128
+ <pre><code>const longHand = /[A-Za-z0-9_]+/;
129
+ const shortHand = /\w+/;
130
+ const numbers = &quot;42&quot;;
131
+ const myFavoriteColor = &quot;magenta&quot;;
132
+
133
+ longHand.test(numbers); // true
134
+ shortHand.test(numbers); // true
135
+ longHand.test(myFavoriteColor); // true
136
+ shortHand.test(myFavoriteColor); // true
137
+ </code></pre>
138
+ <h2 id="除了字母和数字，其他的都要匹配"><a href="#除了字母和数字，其他的都要匹配" class="headerlink" title="除了字母和数字，其他的都要匹配"></a>除了字母和数字，其他的都要匹配</h2><p>用<code>\W</code> 表示 <code>\w</code> 的反义</p>
139
+ <pre><code>const noAlphaNumericCharRegex = /\W/gi;
140
+ const weirdCharacters = &quot;!_$!!&quot;;
141
+ const alphaNumericCharacters = &quot;ab283AD&quot;;
142
+
143
+ noAlphaNumericCharRegex.test(weirdCharacters); // true
144
+ noAlphaNumericCharRegex.test(alphaNumericCharacters); // false
145
+ </code></pre>
146
+ <h2 id="匹配所有数字"><a href="#匹配所有数字" class="headerlink" title="匹配所有数字"></a>匹配所有数字</h2><p>你可以使用字符集<code>[0-9]</code>，或者使用简写 <code>\d</code></p>
147
+ <pre><code>const digitsRegex = /\d/g;
148
+ const stringWithDigits = &quot;My cat eats $20.00 worth of food a week.&quot;;
149
+
150
+ stringWithDigits.match(digitsRegex); // [&quot;2&quot;, &quot;0&quot;, &quot;0&quot;, &quot;0&quot;]
151
+ </code></pre>
152
+ <h2 id="匹配所有非数字"><a href="#匹配所有非数字" class="headerlink" title="匹配所有非数字"></a>匹配所有非数字</h2><p>用<code>\D</code> 表示 <code>\d</code> 的反义</p>
153
+ <pre><code>const nonDigitsRegex = /\D/g;
154
+ const stringWithLetters = &quot;101 degrees&quot;;
155
+
156
+ stringWithLetters.match(nonDigitsRegex); // [&quot; &quot;, &quot;d&quot;, &quot;e&quot;, &quot;g&quot;, &quot;r&quot;, &quot;e&quot;, &quot;e&quot;, &quot;s&quot;]
157
+ </code></pre>
158
+ <h2 id="匹配空格"><a href="#匹配空格" class="headerlink" title="匹配空格"></a>匹配空格</h2><p>使用 <code>\s</code> 来匹配空格和回车符</p>
159
+ <pre><code>const sentenceWithWhitespace = &quot;I like cats!&quot;
160
+ var spaceRegex = /\s/g;
161
+ whiteSpace.match(sentenceWithWhitespace); // [&quot; &quot;, &quot; &quot;]
162
+ </code></pre>
163
+ <h2 id="匹配非空格"><a href="#匹配非空格" class="headerlink" title="匹配非空格"></a>匹配非空格</h2><p>用<code>\S</code> 表示 <code>\s</code> 的反义</p>
164
+ <pre><code>const sentenceWithWhitespace = &quot;C a t&quot;
165
+ const nonWhiteSpaceRegex = /\S/g;
166
+ sentenceWithWhitespace.match(nonWhiteSpaceRegex); // [&quot;C&quot;, &quot;a&quot;, &quot;t&quot;]
167
+ </code></pre>
168
+ <h2 id="匹配的字符数"><a href="#匹配的字符数" class="headerlink" title="匹配的字符数"></a>匹配的字符数</h2><p>你可以使用 <code>&#123;下界，上界&#125;</code> 指定一行中的特定字符数</p>
169
+ <pre><code>const regularHi = &quot;hi&quot;;
170
+ const mediocreHi = &quot;hiii&quot;;
171
+ const superExcitedHey = &quot;heeeeyyyyy!!!&quot;;
172
+ const excitedRegex = /hi&#123;1,4&#125;/;
173
+
174
+ excitedRegex.test(regularHi); // true
175
+ excitedRegex.test(mediocreHi); // true
176
+ excitedRegex.test(superExcitedHey); //false
177
+ </code></pre>
178
+ <h2 id="匹配最低个数的字符数"><a href="#匹配最低个数的字符数" class="headerlink" title="匹配最低个数的字符数"></a>匹配最低个数的字符数</h2><p>使用<code>&#123;下界, &#125;</code>定义最少数量的字符要求,下面示例表示字母 <code>i</code> 至少要出现2次</p>
179
+ <pre><code>const regularHi = &quot;hi&quot;;
180
+ const mediocreHi = &quot;hiii&quot;;
181
+ const superExcitedHey = &quot;heeeeyyyyy!!!&quot;;
182
+ const excitedRegex = /hi&#123;2,&#125;/;
183
+
184
+ excitedRegex.test(regularHi); // false
185
+ excitedRegex.test(mediocreHi); // true
186
+ excitedRegex.test(superExcitedHey); //false
187
+ </code></pre>
188
+ <h2 id="匹配精确的字符数"><a href="#匹配精确的字符数" class="headerlink" title="匹配精确的字符数"></a>匹配精确的字符数</h2><p>使用<code>&#123;requiredCount&#125;</code>指定字符要求的确切数量</p>
189
+ <pre><code> const regularHi = &quot;hi&quot;;
190
+ const bestHi = &quot;hii&quot;;
191
+ const mediocreHi = &quot;hiii&quot;;
192
+ const excitedRegex = /hi&#123;2&#125;/;
193
+
194
+ excitedRegex.test(regularHi); // false
195
+ excitedRegex.test(bestHi); // true
196
+ excitedRegex.test(mediocreHi); //false
197
+ </code></pre>
198
+ <h2 id="匹配0次或1次"><a href="#匹配0次或1次" class="headerlink" title="匹配0次或1次"></a>匹配0次或1次</h2><p>使用 <code>?</code> 匹配字符 0 次或1次</p>
199
+ <pre><code>const britishSpelling = &quot;colour&quot;;
200
+ const americanSpelling = &quot;Color&quot;;
201
+ const languageRegex = /colou?r/i;
202
+
203
+ languageRegex.test(britishSpelling); // true
204
+ languageRegex.test(americanSpelling); // true
205
+ </code></pre>
206
+ <p>英文原文地址：<a target="_blank" rel="noopener" href="https://dev.to/emmawedekind/regex-cheat-sheet-2j2a">https://dev.to/emmawedekind/regex-cheat-sheet-2j2a</a></p>
207
+ <p>为了保证的可读性，本文采用意译而非直译。</p>
208
+ <p>以上就是javascript常用正则表达式备忘录的详细内容，更多请关注html中文网其它相关文章！</p>
209
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/26940.html">https://xuehuayu.cn/article/26940.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/9738.html">CSS伪元素指南</a><a class="next" href="/article/3760.html">ES2019中JavaScript的新功能</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
210
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
211
+ const locale = {
212
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
213
+ sofa: '沙发空缺中，还不快抢~',
214
+ };
215
+ Waline.init({
216
+ el: '#vcomment',
217
+ serverURL: serverURL,
218
+ pageSize: '20',
219
+ visitor: true, // 阅读量统计
220
+ requiredMeta: ['nick', 'mail'],
221
+ emoji: [
222
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
223
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
224
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
225
+ ],
226
+ locale,
227
+ pageview: true
228
+ })
229
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
230
+ var val = $(this).val()
231
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
232
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
233
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
234
+
235
+ if (val === 'self') {
236
+ $('#search').html(self)
237
+ var search_path = 'search.xml';
238
+ if (search_path.length == 0) {
239
+ search_path = 'search.xml';
240
+ }
241
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
242
+ searchFunc(path, 'local-search-input', 'local-search-result');
243
+ } else if (val === 'baidu') {
244
+ $('#search').html(baidu)
245
+ } else if (val === 'google') {
246
+ $('#search').html(google)
247
+ }
248
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
249
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
250
+ if (cnb) {
251
+ var gxba =document.getElementById('gxba')
252
+ var gaba =document.getElementById('gaba')
253
+ var gabaLink =document.getElementById('gaba-link')
254
+ gxba.innerText ='京ICP备20007647号-1'
255
+ gaba.innerText ='京公网安备 11010802031254号'
256
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
257
+ }
258
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>