javascript - 是否可以在不破坏布局的情况下突出显示网页上的所有单词？

Question

我为 firefox 编写了一个扩展程序，它可以突出显示网页上的所有单词(不包括给定列表中的某些单词)。

我注意到(除了我的扩展非常慢之外)一些网页被“破坏”，更具体地说是布局被破坏(特别是带有叠加广告或精美下拉菜单的网站)。

我的代码换行 <span>围绕每个“单词”标记，或者准确地说围绕每个标记标记，因为我使用空格作为分隔符来拆分文本节点。

那么有没有可能在不破坏页面布局的情况下实现这个任务呢？

我正在遍历所有文本节点，拆分它们，并遍历每个标记。当 token 在我的列表中时，我不会突出显示它，否则我会包装 <span>标记它。

因此，任何有关如何更快完成此操作的建议也会有所帮助。

以下是正确突出显示和未正确突出显示的网页的一些屏幕截图:

对: en.wikipedia.org before highlighting , en.wikipedia.org after highlighting .

错误: developer.mozilla.org before highlighting , developer.mozilla.org after highlighting .

Answer 1

好的。研究这段代码。它搜索“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;
  }