Bookmarklet，它捕獲選定的內容，包括HTML標記

我正在構建一個JS書籤，它允許我捕獲用戶在其瀏覽器中選擇的文本並將其發送到Web應用程序。目前我已經簽出一對夫婦的教程，並有一個腳本，看起來像這樣：Bookmarklet，它捕獲選定的內容，包括HTML標記

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);

爲了使它更容易一點，這裏有一個更可讀的方式代碼：

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);

的當前代碼我抓住了選定的文本併發出警報，以便我可以看到所捕獲的內容。但是，文本的格式對我來說很重要，所以我真正想要做的就是在本文中抓取任何HTML。事實上，我認爲找出用戶在頁面中選擇的位置並查找選定內容的開頭和結尾以查找最近的HTML標籤，然後獲取其中的內容可能會更好。（因爲用戶不知道他們是否選擇HTML或不容易）

我更習慣於使用JQuery來做DOM選擇，所以這在我的腦海中目前略顯凌亂。（除非你可以使用JQuery加上書籤...你能嗎？）

任何人都可以幫助我嗎？（即使只是指向正確的方向我也會很棒，我將這作爲一個業餘愛好學習項目，因此我很樂意自己找出一些東西。）

來源

2011-05-12 Ganesh Shankar

如果你真的想在它使用jQuery看看：http://www.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/ – mVChr 2011-05-12 06:15:15

那麼，JQuery是我所熟悉的。但是我想知道在技術上會是一個非常小的JS的膨脹......（如果這是一個很大的話，我試圖做的事實際上是非常簡單的跨瀏覽器）。謝謝堆，但我一定會嘗試一下！ – 2011-05-12 06:20:00

下面的函數將返回一個包含用戶的選擇的HTML的字符串：

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; 
}

這裏有一個削減版的書籤：

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);})()

來源

2011-05-12 08:20:04

謝謝！這幾乎是我想要做的:) – 2011-05-12 09:24:18

追加getSelection（）。getRangeAt（） 0）.cloneContents（）到div，然後得到div的innerHTML。

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

如果您在GET請求中傳遞標記，則首先需要使用encodeURIComponent（）。

另請注意，GET請求可能只接受如此多的數據。

來源

2011-05-12 07:23:29 Shadow2531

這是正確的一般方法，但不會在IE瀏覽器<= 8中工作。 – 2011-05-12 08:38:30

感謝編寫GET的提示！ – 2011-05-12 09:23:11

Bookmarklet，它捕獲選定的內容，包括HTML標記

回答

相關問題