是否可以在不破壞佈局的情況下突出顯示網頁上的所有單詞？

Question

我寫了一個Firefox的擴展，它突出顯示了網頁上的所有單詞（不包括給定列表中的某些單詞）。

我注意到的是（除了我的擴展速度非常慢），一些網頁被「破壞」，更具體地說佈局被破壞（特別是覆蓋廣告或花哨的下拉菜單的網站）。

我的代碼在每個「單詞」周圍標記了<span>標籤，或者精確地圍繞每個標記，因爲我將文本節點與空白分隔開作爲分隔符。

那麼是否有可能在不破壞頁面佈局的情況下實現此任務？

我遍歷所有文本節點，分割它們，並遍歷每個標記。 當令牌位於我的列表中時，我不會突出顯示它，否則我將圍繞它包裝<span>標籤。

因此，如何更快地完成這項任務可能會有所幫助。

這裏有一個正確突出和未正確突出網頁的截圖：

權： en.wikipedia.org before highlighting， en.wikipedia.org after highlighting。

錯誤： developer.mozilla.org before highlighting, developer.mozilla.org after highlighting。

Answer 1

哦編輯我的解決方案時，將妥善解決更新，我看你想強調的所有單詞

這是代碼的Firefox如何凸顯的東西不改變文件：Finder.jsm - _highlight function。你將不得不復制這個文件，並將其用於整個文件，如果你需要幫助，請告訴我，我會做。

這裏是我的解決方案，突出單個單詞的所有匹配：https://stackoverflow.com/a/22206366/1828637

這裏的人，這是你將如何以突出整個文件，我沒有完成的片段，但是這是它的開始： Gist - HighlightTextInDocument

Answer 2

下面是複製粘貼答案，以突出顯示文檔中的所有內容。當你瞭解它與我們分享，怎麼樣，你可以用不同的顏色來突出顯示，現在所有的粉紅色O_O

function _getEditableNode(aNode) { 
    while (aNode) { 
     if (aNode instanceof Ci.nsIDOMNSEditableElement) 
     return aNode.editor ? aNode : null; 

     aNode = aNode.parentNode; 
    } 
    return null; 
    } 

function _highlightRange(aRange, aController) { 
    let node = aRange.startContainer; 
    let controller = aController; 

    let editableNode = this._getEditableNode(node); 
    if (editableNode) 
     controller = editableNode.editor.selectionController; 

    let findSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND); 
    findSelection.addRange(aRange); 

    if (editableNode) { 
     // Highlighting added, so cache this editor, and hook up listeners 
     // to ensure we deal properly with edits within the highlighting 
     if (!this._editors) { 
     this._editors = []; 
     this._stateListeners = []; 
     } 

     let existingIndex = this._editors.indexOf(editableNode.editor); 
     if (existingIndex == -1) { 
     let x = this._editors.length; 
     this._editors[x] = editableNode.editor; 
     this._stateListeners[x] = this._createStateListener(); 
     this._editors[x].addEditActionListener(this); 
     this._editors[x].addDocumentStateListener(this._stateListeners[x]); 
     } 
    } 
    } 

    function _getSelectionController(aWindow) { 
    // display: none iframes don't have a selection controller, see bug 493658 
    if (!aWindow.innerWidth || !aWindow.innerHeight) 
     return null; 

    // Yuck. See bug 138068. 
    let docShell = aWindow.QueryInterface(Ci.nsIInterfaceRequestor) 
          .getInterface(Ci.nsIWebNavigation) 
          .QueryInterface(Ci.nsIDocShell); 

    let controller = docShell.QueryInterface(Ci.nsIInterfaceRequestor) 
          .getInterface(Ci.nsISelectionDisplay) 
          .QueryInterface(Ci.nsISelectionController); 
    return controller; 
    } 
var doc = gBrowser.contentDocument; 
var searchRange = doc.createRange(); 
searchRange.selectNodeContents(doc.documentElement); 
_highlightRange(searchRange,_getSelectionController(gBrowser.contentWindow)) 

Answer 3

@jervis，我不能對下@Noitidart碼您的評論評論因爲我還沒有50rep。所以我必須在這裏發帖。

回覆：

我與 'gFindBar._highlightDoc（真，字）' 現在做到了。我使用的是Firefox 17，所以我不知道gFindBar是否是最先進的。 - 真味40分鐘前

但我測試了他的代碼，並和它的作品。

請勿使用gFindBar。

將其複製並粘貼到您的便籤本中。

爲什麼使用gFindBar._highlightDoc(true, word)？我想要突出顯示文檔中的所有內容？你從哪裏得到_highlightDoc？我在@ Noitidart的代碼中看不到任何地方。

Regading上迭代夜評論所有單詞，並使用gFindBar._highlightDoc：

我與 'gFindBar._highlightDoc（真，字）' 現在做到了。我使用的是Firefox 17，所以我不知道gFindBar是否是最先進的。 - 真味39分鐘前

老兄爲什麼這樣做....我看到@Noitidart上張貼鏈接專題的每個字的解決方案：gBrowser.tabContainer.childNodes[0].linkedBrowser.finder.highlight(true, 'YOUR_WORD_HERE');，是非常容易的，一條線，沒有必要創建文本節點跨度或任何東西。您必須在每個要突出顯示的選項卡上運行此代碼。

Answer 4

好的。學習這些代碼。它搜索「is」的所有實例，並突出顯示它是否未包含單詞字符。把這個標籤放在你的便籤本中。你會看到像「List」這樣的單詞和其他包含「Is」的單詞沒有突出顯示，但所有的「Is」都是。

我基本上爲你做了一個插件。您現在可以將其作爲名爲RegEx FindBar的插件發佈，並獲得所有功勞。

var doc = gBrowser.contentDocument; 
var ctrler = _getSelectionController(doc.defaultView); 

var searchRange = doc.createRange(); 
searchRange.selectNodeContents(doc.documentElement); 

let startPt = searchRange.cloneRange(); 
startPt.collapse(true); 

let endPt = searchRange.cloneRange(); 
endPt.collapse(false); 

let retRane = null; 


let finder = Cc["@mozilla.org/embedcomp/rangefind;1"].createInstance().QueryInterface(Ci.nsIFind); 
finder.caseSensitive = false; 
var i = 0; 
while (retRange = finder.Find('is', searchRange, startPt, endPt)) { 
    i++; 
    var stCont = retRange.startContainer; 
    var endCont = retRange.endContainer; 

    console.log('retRange(' + i + ') = ', retRange); 
    console.log('var txt = retRange.commonAncestorContainer.data',retRange.commonAncestorContainer.data); 

    //now test if one posiion before startOffset and one position after endOffset are WORD characters 

    var isOneCharBeforeStCharWordChar; //var that holds if the character before the start character is a word character 
    if (retRange.startOffset == 0) { 
     //no characters befor this characte so obviously not a word char 
     isOneCharBeforeStCharWordChar = false; 
    } else { 
     var oneCharBeforeStChar = stCont.data.substr(retRange.startOffset-1,1); 
     if (/\w/.test(oneCharBeforeStChar)) { 
      isOneCharBeforeStCharWordChar = true; 
     } else { 
      isOneCharBeforeStCharWordChar = false; 
     } 
     console.log('oneCharBeforeStChar',oneCharBeforeStChar); 
    } 

    var isOneCharAfterEndCharWordChar; //var that holds if the character before the start character is a word character 
    if (retRange.endOffset == endCont.length - 1) { 
     //no characters after this characte so obviously not a word char 
     isOneCharAfterEndCharWordChar = false; 
    } else { 
     var oneCharAferEndChar = endCont.data.substr(retRange.endOffset,1); //no need to subtract 1 from endOffset, it takes into account substr 2nd arg is length and is treated like length I THINK 
     if (/\w/.test(oneCharAferEndChar)) { 
      isOneCharAfterEndCharWordChar = true; 
     } else { 
      isOneCharAfterEndCharWordChar = false; 
     } 
     console.log('oneCharAferEndChar',oneCharAferEndChar); 
    } 

    if (isOneCharBeforeStCharWordChar == false && isOneCharAfterEndCharWordChar == false) { 
     //highlight it as surrounding characters are no word characters 
     _highlightRange(retRange, ctrler); 
     console.log('highlighted it as it was not surrounded by word charactes'); 
    } else { 
     console.log('NOT hilte it as it was not surrounded by word charactes'); 
    } 


    //break; 
    startPt = retRange.cloneRange(); 
    startPt.collapse(false); 
} 

/*********************/ 

function _getEditableNode(aNode) { 
    while (aNode) { 
     if (aNode instanceof Ci.nsIDOMNSEditableElement) 
     return aNode.editor ? aNode : null; 

     aNode = aNode.parentNode; 
    } 
    return null; 
    } 

function _highlightRange(aRange, aController) { 
    let node = aRange.startContainer; 
    let controller = aController; 

    let editableNode = this._getEditableNode(node); 
    if (editableNode) 
     controller = editableNode.editor.selectionController; 

    let findSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND); 
    findSelection.addRange(aRange); 

    if (editableNode) { 
     // Highlighting added, so cache this editor, and hook up listeners 
     // to ensure we deal properly with edits within the highlighting 
     if (!this._editors) { 
     this._editors = []; 
     this._stateListeners = []; 
     } 

     let existingIndex = this._editors.indexOf(editableNode.editor); 
     if (existingIndex == -1) { 
     let x = this._editors.length; 
     this._editors[x] = editableNode.editor; 
     this._stateListeners[x] = this._createStateListener(); 
     this._editors[x].addEditActionListener(this); 
     this._editors[x].addDocumentStateListener(this._stateListeners[x]); 
     } 
    } 
    } 

    function _getSelectionController(aWindow) { 
    // display: none iframes don't have a selection controller, see bug 493658 
    if (!aWindow.innerWidth || !aWindow.innerHeight) 
     return null; 

    // Yuck. See bug 138068. 
    let docShell = aWindow.QueryInterface(Ci.nsIInterfaceRequestor) 
          .getInterface(Ci.nsIWebNavigation) 
          .QueryInterface(Ci.nsIDocShell); 

    let controller = docShell.QueryInterface(Ci.nsIInterfaceRequestor) 
          .getInterface(Ci.nsISelectionDisplay) 
          .QueryInterface(Ci.nsISelectionController); 
    return controller; 
    }