javascript - javascript - 同时多个 CreateTextRange

Question

我有以下 javascript 函数，当传递诸如“部门”之类的单词时，它将以红色突出显示屏幕上找到的“部门”的第一个实例。但是，我希望此代码突出显示给定单词的所有实例。

function findString (str) { 
    var TRange=null;
    var strFound; 
    var TRange = self.document.body.createTextRange();
    TRange.findText(str);
    TRange.execCommand('foreColor', false, "#ff0000");
    return;
} 

Answer 1

function findString (str) { 
    var TRange=null;
    var strFound; 
    var TRange = self.document.body.createTextRange();

    while(TRange.findText(str))
    {
        TRange.execCommand('foreColor', false, "#ff0000");
    }

    return; 
    } 

Answer 2

这段代码似乎已经做到了，但它是草率的，有点过分。我确信必须有一种更短的方法来做到这一点，而不是在同一个函数中几乎重复我的 execCommand 行两次。

var TRange=null;
function findString (str) { 

    var strFound; 
    var counter = 0;

    if (TRange==null || strFound==0) {
            TRange=self.document.body.createTextRange()  
            strFound=TRange.findText(str) 
            if (strFound) {
                TRange.execCommand('foreColor', false, "#ff0000");
            }
    } 

    TRange.collapse(false);
    while (strFound=TRange.findText(str)) {
        if (counter > 50){
            alert("Search exceeded maximum limit of 50.");
            return;
        }
        TRange.execCommand('foreColor', false, "#ff0000");
        TRange.collapse(false); 
        counter += 1;
    }

    return;
} 

Answer 3

function findString (str) { 
    var TRange = document.body.createTextRange();

    while (TRange.findText(str)){
        TRange.execCommand("foreColor", false, "#ff0000");
        TRange.collapse(false);
    }
}

Answer 4

看看这个链接：http ://www.nsftools.com/misc/SearchAndHighlight.htm

该页面上使用的脚本与您正在采用的方法不同，但最终结果正是您正在寻找的。