请问如何使用js书签来选择并收藏网页中的内容？

This topic created in 5393 days ago, the information mentioned may be changed or developed.

应该有不少人用过Evernote的这款Chrome扩展应用，
地址： https://chrome.google.com/webstore/detail/pioclpoplcdbaefihamjohnefbikjilc

使用该应用后，可以通过键盘上下左右来选择页面中的元素，最后将其上传至Evernote中去。
同时保留了所选区域的样式。

同样的产品：
http://www.jtben.com/help/guide.html
剪贴本，有一个js书签的工具，以上地址有其js脚本的演示。
通过加载脚本，可以达到做笔记，剪裁页面，上传页面的效果

我目前搜到的资料仅仅是通过js书签+php来收藏网页地址
http://tutorialzine.com/2010/04/simple-bookmarking-app-php-javascript-mysql/

请问，如何才能通过js像Evernote那般可以自由选择页面元素并且保留样式呢？

请问这涉及到什么技术？能不能给我指个方向，给一些关键词。

谢谢。

页面

evernote

4 replies • 1970-01-01 08:00:00 +08:00

xingzhi

Nov 10, 2011

找到了些资料，自己回复：）

Bookmarklet

http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/

xingzhi

Nov 10, 2011

js return 已选内容。
http://stackoverflow.com/questions/5973978/bookmarklet-which-captures-selected-content-including-html-tags

目前只剩下最后一个问题：

如何在select了内容后，保存它相对应的样式。

xingzhi

Nov 11, 2011

OT：
不小心找到Ruby 抓取页面的一个教程，甚觉不错。link： http://cn.asciicasts.com/episodes/190-screen-scraping-with-nokogiri

回到主题：
有这个东西： http://westciv.com/xray/
XRAY 可以选择页面板块，显示出对应的css，这也证明了，可以使用js来获取页面选择区域的css的。但这个bookmarklet并不能直接显示出css源码。

还发现了一个类似的产品：
https://www.memonic.com/
但只是保存了html代码，无法保存样式。

若是只上传html的话，结合上面所说的js return所选内容，做起来应该是不难的。

xingzhi

Nov 11, 2011

通过察看Evernote里面的Note编辑器的代码，发现Evernote是给每一个网页元素都加上了style，将原有样式放进了style去。

这样就产生了很多冗余的style代码了。。。不过人家财大气粗，不怕- -。

关于实现，问了一个做前端的朋友（+Mingel）他如此回答：
其实在复制文本的时候，内容和样式是同时都放到内存中的，在粘贴的时候编辑器如果能够处理内存中所有的数据，就会把样式一并带过来，比如Word，Gmail；否则就只复制文本，比如记事本。看起来不需要js做太多。

说得很对。至此，lz所要的答案也得到了：）

之所以自言自语是因为看到了该帖子有5个收藏。就把自己找到的资料share一下：）