极客神殿

匹配有效的电子邮件地址。此正则支持常见的电子邮件格式，但不适用于所有可能的电子邮件规则。：匹配有效的 HTTP、HTTPS 或 FTP 协议的 URL。：匹配连续重复的单词，适用于检查文章中的重复错误。：解析 CSV 文件中的字段，包括双引号内的值。：匹配有效的时间格式（小时：分钟：秒），例如。：匹配 Markdown 格式的标题，支持从。：匹配多个以逗号或分号分隔的电子邮件地址。：匹配合法的中国身份证号（18 位格式）。：匹配电话号码，支持带有可选的国家代码。：匹配仅由字母和数字组成的字符串。

要实现将粘贴到文本框中的内容过滤，只显示其中的http。

AJAX的全称是Asynchronous JavaScript And XML.，是异步的 JavaScript和XML，可以在无需重新加载整个网页的情况下，更新部分网页内容的技术。是用于创建快速动态网页的技术。依赖于浏览器提供的对象，这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行数据交互。XML是扩展标记语言，能够用一系列简单的标记描述数据。

在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。window.self功能：是对当前窗口自身的引用。它和window属性是等价的。语法：window.self注：window、self、window.self是等价的。window.top功能：返回顶层窗口，即浏览器窗口。语法：window.top注：如果窗口本身就

在常见业务开发中，POST请求常常在这些地方使用：前端表单提交时、调用接口代码时和使用Postman测试接口时。我们下面来一一了解：一、前端表单提交时application/x-www-form-urlencoded表单代码：<form action="http://localhost:8888/task/" method="POST">First name: <input type="text" name="firstName" value="Mickey&">&

先看以下代码：function Foo(){ getName = function(){ alert(1); }; return this;}Foo.getName = function(){ alert(2); };Foo.prototype.getName = function(){ alert(3); };var getName = function(){ alert(4); };function getName(){ alert(5) };Foo.getName();

重绘和重排当下载完页面后，浏览器会解析文件病穿件两个内部数据结构，一个DOM树，一个渲染树。根据两棵树，浏览器来渲染页面。当页面的DOM几何属性（改变宽高）改变时，浏览器会使受到影响的树失效，然后重构渲染树，这个过程叫做重排(reflow)。当非几何属性，例如背景颜色，改变时，页面布局没有改变，只需要重新绘制，叫做重绘（repaint）。重排的情况添加或者删除可见DOM元素display:none reflow and repaint visibility: hidden repaint

一、URI介绍URI（统一资源标识符） 是 uniform resource identifier的缩写，它定义了接受内容的协议以及附带的相关内容，如果附带的相关内容是一个地址，那么此时的 URI 也是一个 URL （uniform resource locator )。二、什么是 data URI scheme？Data URI scheme 简称 Data URI，经常会被错误地写成 data URLs。即前缀为data：协议的的URL，其允许内容创建者向文档中嵌入小文件。假设我们有一个图片需要

一、前言上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题，有同事说这个有用，有同事说这个没啥用，后来还延伸到网站性能的话题上，大家讨论的激烈程度让我觉得这次选题还不错。本篇先不管到底有用与否，仅仅记录理论知识。也希望大家一起来分享实战经验啊！二、从HTTP URI Scheme入手对于 HTTP URI Scheme 我想大家都应该很熟悉了，href属性值http://github.com就是HTTP URI Scheme，那么什么是DATA URI Scheme呢？其实就是形

规范具体规则：html5 使用简单的 doctype 来启动标准模式无特殊说明，字符编码采用 utf-8根据html5规范，鼓励作者指定lang属性，来指出页面的语言，这样做会有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则等无特殊需要，可通过 edge mode 来通知 IE 使用最新的兼容模式引入css和js时，无需指定type，因为text/css text/javascript为默认值css在head引入，js除基础库等基础文件外在body结束标签之前引入缩进使用两个空

由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷。话不多说开始搞！1、引入几个JS库①：jquery 版本还没试过我用的是3.1.1 （不贴链接了，这个要找很容易）②：dom-to-image.js （点击下载 下载下来解压开在src目录里面）③：FileSaver.js （点击下载 下载下来解压开在src目录里面）2、新建HTML引入第一步中的几个库3、生成图片3.1、生成png图片

由于业务需要，要将html的表格转成图片下载下来，一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错。废话不多说，开搞。第一步：下载必要的js库① jquery库（不使用jquery的就算了，要的自己能找到的）：②dom-to-image.js：这里写链接内容③FileSaver.js：这里写链接内容第二步：新建html，引用第一步的几个库第三步：实

W3C 标准WHATWG: write()定义和用法文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。语法：document.write()参数：字符串，可以传多个字符串参数返回值：undefined注意事项如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。在异步引入的js和DOMCo

初春的晚上，闲来无事，聊聊 document.write 方法。document.write 使用方式非常简单，把 “字符串化”（不好意思，这可能是我自己创造的名词）的 html 代码当做参数传入就 ok 了，我并不打算讲它的基本用法，可以参考以下链接：HTML DOM write() 方法HTML DOM write() MethodDocument.write()Using document.writedocument.write 经常会被用来加载脚本，比如这样：var url = '

// Underscore.js 1.8.3// http://underscorejs.org// (c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors// Underscore may be freely distributed unde...

网站加载的整个完整过程了。首先浏览器从服务器接收到html代码，然后开始解析html构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建（script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行）综上所述，scri

最近学习了一下Jsrender模板渲染工具，非常不错，功能比较强大，官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此。总结一下！！jsRender 三个最重要的概念：模板、容器和数据。 最重要的是：view(视图) 是我们定义的模板，上下文是视图所用的对象。一、基础。{{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。{{: pathOrExpr}} (value) 值类型 {{> pathOrExp

它显示一页。我想显示所有页面。一个在另一个之下，或者放置一些按钮来更改页面，甚至更好地加载PDF.JS的所有标准控件，就像在Firefox中一样。如何实现这个？PDFJS有一个成员变量numPages，所以你只需要遍历它们。 但 重要的是要记住，在pdf.js中获取页面是异步的，因此无法保证顺序。所以你需要链接它们。你可以沿着这些方向做点什么：var currPage = 1; //Pages are 1-based not 0-basedvar numPages = 0;var thePDF =

我们最开始学前端的时候都会看到教程在处理外部css，js的时候会将css放在header中，js放在body的最后。为什么要这样子处理，今天参考一些资料好好分析下。为什么外链css为什么要放头部？首先整个页面展示给用户会经过html 的解析与渲染过程。而外链css无论放在html的任何位置都不影响html的解析，但是影响html的渲染。如果将css放在尾部，html的内容可以第一时间显示出来，但是会阻塞html行内css的渲染。浏览器的这个策略其实很明智的，想象一下，如果没有这个策略，页面首先会呈

在JavaScript中，空判断比较常见，但究竟应该如何正确地使用空判断呢？不同的数据类型有不同的判断方法，不能同一而论，在判断空前，应先确定数据的类型。1、不同类型具有不同的判空方法在判空前应预判数据的类型，如果期望类型不清晰，则可能会导致错误的判断或考虑情况不周全。序号测试类型测试代码结果1无参数或传入undefinedtest1();输入值：undefined,类型：undefined，返回值：falsetest1(undefined, ‘undefined

先来前端的代码：html 代码：js代码：function init() {var ele_files = document.querySelector("#files");ele_files.addEventListener(“change”, function () {var files = ele_files.files;var form = new FormData();for (var i = 0; i < files.length; i++) {form.append(“

href和src的区别一般加载CSS用href,并放在头部；加载script用src，放在body内的下方。href是hypertext reference的缩写，表示超文本引用，用来建立当前元素和文档间的链接。常用的有link，a。当CSS使用href引用，浏览器会识别该文档问CSS，并行下载，不会停止对当前文档的加载。src是source的缩写，是资源，页面必不可少的一部分，src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。当script使用sr

思考: css为什么要放在head标签中, 而不能像javascript一样置于body标签尾部?Talk is cheap, show me the code.OK, 那我们通过写一些代码来得出结果在这里先说chrome控制台的一个小技巧:限制download速度对我们的测试很有帮助! 可以让我们看清一些细节我们先把download速度限制为40kb/s, 开始测试:当css引入位置放于body标签尾部<!DOCTYPE html><html lang="en"&g

Web 性能测试工具比如 Google Page Speed 或者 Dareboost 已经指出：使用 document.write 注入一段脚本会引起严重的网站加载耗时问题。让我们再次讨论这个话题，因为 Chrome 的下次更新将不再允许这样的脚本注入方式。你将面临什么问题？有什么替代方案？Chrome 将不再执行通过 document.write 注入的脚本9月初 Paul Kinlan 在 developers.google.com 网站 上宣布：Chrome 将很快干预 document.wri

Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架，它们被前端开发者广泛地使用。但是，当我们现在是针对现代化浏览器进行开发时，很多时候我们利用的Underscore中的方法已经被ES5与ES6所支持了，如果我们希望我们的项目尽可能地减少依赖的话，我们可以根据目标浏览器来选择不用Lodash或者Underscore。Quick links _.each _.map _.every _.some _.reduce

EXIF Orientation 参数让你随便照像但都可以看到正确方向的照片而无需手动旋转（前提要图片浏览器支持，Windows 自带的不支持）这个参数在佳能、尼康相机照的照片是自带的，但我的奥林巴斯就没有，看照片时不能自动旋转，修正的方法有两个，一个看不顺眼就旋转，另一个是修改 EXIF 中的 Orientation 参数（XnView 浏览器查看缩略图时可以修改）如果你想在旋转图片时只写入EXIF方向信息而不旋转图片就可以用到下面的方法看图修改很简单旋转角度参数0°1

在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。当INPUT[type=file]控件上已经选择过一次文件之后，再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和第一次是一样的，没有改变。还有个更蛋疼情况是有些浏览器会自动记住控件上的文字，即使页面关闭后重新打开还是会恢复到原

上传后图片旋转修正测试流程上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换blob和file文件供其他功能调用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width,initial-scale=1

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。利用exif.js读取照片的拍摄信息，详见 http://code.ciaoca.com/javascript/exif-js/这里主要用到Orientation属性。Orientation属性说明如下：旋转角度参数0°1顺时针90°6

web 缓存一、什么是 web 缓存Web 缓存是指一个 Web 资源（如 html 页面，图片，js，数据等）存在于 Web 服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的 URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个 URL 地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏

为什么要使用 HTTP 缓存？缓存的内容又是什么？HTTP 缓存头部字段Cache-Control - 请求/响应头，缓存控制字段：no-store - 所有内容都不缓存no-cache - 缓存，但是浏览器使用缓存前，都会请求服务器判断缓存资源是否是最新的max-age = x(单位秒) - 请求缓存后的 x 秒不再发起请求s-maxage= x (单位秒) - 代理服务器请求源站缓存后的 x 秒不再发起请求，只对 CDN 缓存有效public - 客户端和代理服务器（CND.

简介这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。本篇文章是参照 @leonardomso 创立，英文版项目地址在这里。由于原版资源都要翻墙，所以本人创立一个中文版，附上关于这些概念在国内的一些文章和视频。若有觉得更好的文章或者视频，可以贡献出来，觉得有误的，请联系我删除。更新若有觉得更好的文章或者视频，可以贡献出来，觉得有误的，请联系我删除。文章的排序优化，前面的文章是介绍概念，后面的文章是深入解

index.html需要部署在web服务器上打开<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="content/css/reset.css"> <link rel="stylesheet" href="content/

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pdfClass { border: 1px solid black; } </style> <script src="pdf.js"></script&g

一直想往前端流媒体方面研究，学习视频播放器 API 期间，断断续续的终于整体实现了一个简单的播放器，以及一些相关的插件、工具和组件。 之前在 v 站发过一次求测试，现在终于有一个相对稳定的版本，但兼容性问题还是有的，想大佬们继续帮忙测试一下。 其实写到一半才发现和其他播放器项目重名了，感觉悲催了。 详细功能的话好像也和其他播放器差不多，但在写的过程中发现和学习了一些好玩的东西，例如：Chrome 的画中画模式确实很方便原来前端也可以把 srt 字幕转成 vtt 字幕直接使用可以直接从视频生成 GIF

在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子政务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。目前随着浏览器技术发展的不断成熟与强大，大部分的浏览器都支持直接把PDF文件拖到浏览器中显示，最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来

需求:多维数组=>一维数组let ary = [1, [2, [3, [4, 5]]], 6];let str = JSON.stringify(ary);第0种处理:直接的调用arr_flat = arr.flat(Infinity);第一种处理ary = str.replace(/(\[\]))/g, '').split(',');第二种处理str = str.replace(/(\[\]))/g, '');str = '[' + str + ']';ary = JSON

《DOM 启蒙》读书笔记及测试代码节点概览节点组成的树形层次结构节点类型3.节点继承继承而来节点打交道的属性和方法节点类型名称和值Node.prototype.nodeTypeNode.prototype.nodeNameNode.prototype.nodeValue创建节点document.createElementdocument.createTextNodedocument.createCommentdocument.createAttributedocume

移动端 Touch 滑动反弹什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：1. 准备工作什么是移动端的Touch事件？在移动端Touch事件可以细分成三种，分别是：touchstart、touchmove和touchend，并且touch事件必须要用addEventListener去监听。touchStart当手指触碰到屏幕的时候触发touchmove当手指在屏幕上不断移动的时候触发touchend

来看一下代码。<a href="http://www.baidu.com" id="aa">跳转到百度</a><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script> setTimeout(() => { $('#aa').click(); }, 3000);</script>很意外，没执行。我