网页css js 抓取助手(前端已经被玩儿坏了了，瞬间GET了好多前端技能 )

　　网页css js 抓取助手(前端已经被玩儿坏了了，瞬间GET了好多前端技能

)

　　前端坏了！console.log() 可以将图片输出到控制台和其他很酷的东西，这已经不是什么新闻了。这是一个众所周知的旧消息，例如使用 || 运算符为变量分配默认值。今天在知乎上看到一个帖子。，一瞬间，我得到了一大堆前端技巧，有的是技巧，有的是闻所未闻的冷知识，一时消化不了。现将其分类整理分享给大家，也增加了一些平时的积累和拓展的一些内容。HTML文章浏览器地址栏运行JavaScript代码

　　很多人应该还知道，JavaScript 代码可以直接在浏览器地址栏中运行，以 javascript: 开头，后跟要执行的语句。例如：

　　javascript:alert('hello from address bar :)');

　　将以上代码粘贴到浏览器地址栏回车，alert正常执行，并出现弹窗。

　　需要注意的是，如果将代码复制粘贴到浏览器地址栏，IE和Chrome会自动去掉代码开头的javascript:，所以需要手动添加才能正确执行。尽管它不会在 Firefox 中自动删除，但它不会。不支持在地址栏运行JS代码，sigh~

　　这个技术在我的另一篇博文《让Chrome接管邮件连接，收发邮件更方便》中使用，使用浏览器地址栏中的JavaScript代码将Gmail设置为系统的邮件接管程序。

　　浏览器地址栏运行HTML代码

　　如果知道上面这个小秘密的人多，那么知道这个秘密的人就会少一些。HTML代码可以直接在非IE内核浏览器的地址栏中运行！

　　比如在地址栏输入如下代码，回车运行，就会出现指定的页面内容。

　　data:text/html,Hello, world!

　　做什么的，可以把浏览器当编辑器

　　或者在浏览器地址栏上做文章，将以下代码粘贴到地址栏运行，浏览器就变成了一个原创简单的编辑器，就像Windows自带的记事本一样，呵​​呵。

　　data:text/html, 

　　毕竟，多亏了 HTML5 中新的 contenteditable 属性，当元素指定了这个属性时，元素的内容就变成了可编辑的。

　　通过扩展，在控制台中执行以下代码后，整个页面将变为可编辑状态，随意践踏吧~

　　document.body.contentEditable='true';

　　使用标签自动解析 URL

　　很多时候我们有从一个URL中提取域名、查询关键字、变量参数值等的需求，但是万万没想到浏览器可以轻松帮我们完成这个任务，而不需要我们编写规律来爬取。方法是先在JS代码中创建一个a标签，然后将要解析的URL赋值给a的href属性，然后得到我们想要的一切。

　　var a = document.createElement('a'); a.href = 'http://www.cnblogs.com/wayou/p/'; console.log(a.host);

　　使用这个原理并对其进行一些扩展，我们就有了一种更强大的解析 URL 部分的通用方法。下面的代码来自 James 的博客。

<p>function parseURL(url) { var a = document.createElement(&#39;a&#39;); a.href = url; return { source: url, protocol: a.protocol.replace(&#39;:&#39;,&#39;&#39;), host: a.hostname, port: a.port, query: a.search, params: (function(){ var ret = {}, seg =a.search.replace(/^\?/,&#39;&#39;).split(&#39;&&#39;), len = seg.length, i = 0, s; for (;i