獲取包括HTML在內的頁面選擇？

我正在寫一個Chrome擴展，我想知道是否有可能獲得特定選項卡的選定文本，包括底層HTML？所以如果我選擇一個鏈接，它也應該返回<a>標籤。獲取包括HTML在內的頁面選擇？

我試圖尋找在上下文菜單事件對象（是的，我用這個上下文菜單），這是所有自帶的回調：

editable : false 
menuItemId : 1 
pageUrl : <the URL> 
selectionText : <the selected text in plaintext formatting, not HTML>

它還返回一個Tab對象，但是那裏也沒有什麼非常有用的。

所以我在這裏有點虧本。這甚至有可能嗎？如果是這樣，你可能有任何想法都會很棒。謝謝！ :)

來源

2010-08-11 qJake

可以提供適當的解決方案？ – 2015-05-25 11:32:11

這是5年前，我不相信我有擴展了，對不起。 – qJake 2015-05-26 13:16:56

-1

看起來像this和this擴展做你所需要的。

來源

2010-08-11 20:19:09 serg

我通過其中一個來源查找，發現他們是如何做到的，謝謝:) – qJake 2010-08-19 08:23:13

請您分享一下您的解決方案嗎？謝謝。 – 2013-06-13 20:06:29

您的鏈接已損壞。它不再工作了。你能提供適當的解決方案嗎？ – 2015-05-25 11:32:00

獲取頁面的選定文本是相當容易的，你可以這樣做

var text = window.getSelection().toString();

，你會得到當前所選文本的文本表示，可以從內容腳本傳遞給背景頁面或彈出窗口。

獲取HTML內容要困難得多，主要是因爲選擇並不總是在文檔中的乾淨HTML邊界處（如果您只選擇長鏈接的一小部分或表中的幾個單元格例如）。獲取與選擇相關的所有html的最直接方法是引用commonAncestorContainer，它是與包含選擇的開始和結束的最深節點相對應的選擇範圍上的屬性。爲了得到這個，你可以這樣做：

var selection = window.getSelection(); 
// Only works with a single range - add extra logic to 
// iterate over more ranges if needed 
var range = selection.getRangeAt(0); 
var container = range.commonAncestorContainer; 
var html = container.innerHTML

當然，這可能會包含很多未實際選定的HTML。有可能您可以遍歷共同祖先的孩子，並刪除任何不在所選內容中的東西，但這會涉及更多的內容，可能並不是必需的，具體取決於您想要做什麼。

爲了展示如何包裝這一切都成一個擴展，我已經寫了，你可以參考一個簡短的樣本： http://github.com/kurrik/chrome-extensions/tree/master/contentscript-selection/

來源

2010-08-17 18:44:18

我確實使用了一個Range對象，但是我從另一個人發佈的擴展的源代碼中得到了解決方案，對不起。儘管如此，你仍然可以獲得正確的信息。 :) – qJake 2010-08-19 08:23:54

不用擔心;）感謝upvote！ – 2010-08-19 21:38:49

如果你不希望所有的兄弟姐妹的，只是所選擇的HTML，使用range的其他方法，如.cloneContents()（複製）或.extractContents()（剪切）。

這裏我用.cloneContents()：

function getSelectedHTML() { 
    var range = window.getSelection().getRangeAt(0); // Get the selected range 
    var div = document.createElement("div"); 
    div.appendChild(range.cloneContents()); // Get the document fragment from selected range 
    return div.innerHTML; // Return the actual HTML 
}

來源

2016-10-17 13:39:45

獲取包括HTML在內的頁面選擇？

回答

相關問題