Geek Answers Handbook

Bookmark that captures selected content, including html tags

I am creating a JS bookmarklet that allows me to write down the text that the user selected in his browser and sends it to the web application. I have currently tested several tutorials and has a script that looks like this:

javascript:var t;try {t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));}catch(e){t="";}alert(t);

To make this a little easier, the code here is more readable:

 javascript: var t; try { t=((window.getSelection&&window.getSelection()) || (document.getSelection&&document.getSelection()) || (document.selection&&document.selection.createRange&&document.selection.createRange().text)); }catch(e) { t=""; } alert(t);

In the current code, I have selected text and alerts so that I can see what was captured. However, formatting the text is very important to me, so I would like HTML to be in this text too. In fact, I think it would be better to develop where the user selected on the page, and look from the very beginning and back from the end of the selected content to find the closest HTML tags, and then capture what's inside that. (since the user cannot determine whether they selected HTML or not)

I'm much more used to working with jQuery to do DOM selections, so it's a little over my head for now. (If you cannot use jQuery with a bookmarklet ... can you?)

Can anyone help me with this? (Even just pointing me in the right direction would be great, I do it as a hobby educational project, so I'm glad to think about it myself.)

+4
source share
2 answers

The following function will return a string containing the user's HTML selection:

 function getSelectionHtml() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } return html; }

Here's a cut out version for the bookmarklet:

 javascript:(function(){var h="",s,g,c,i;if(window.getSelection){s=window.getSelection();if(s.rangeCount){c=document.createElement("div");for(i=0;i<s.rangeCount;++i){c.appendChild(s.getRangeAt(i).cloneContents());}h=c.innerHTML}}else if((s=document.selection)&&s.type=="Text"){h=s.createRange().htmlText;}alert(h);})()
+9
source

Add getSelection () results. getRangeAt (0) .cloneContents () in the div and then get the innerHTML div.

 javascript:(function()%7Bvar%20node%3Ddocument.createElement('div')%3Bnode.appendChild(getSelection().getRangeAt(0).cloneContents())%3Balert(node.innerHTML)%3B%7D)()%3B

If you pass markup in a GET request, you first need to use encodeURIComponent ().

Also note that a GET request can only receive so much data.

+2
source

More articles:


All Articles