Javascript 如何突出显示UIWebView中字符串的第一次出现？

我使用下面的javascript代码查找UIWebView中出现的所有字符串：

UIWebViewSearch.js：

var uiWebview_SearchResultCount = 0;

/*!
 @method     uiWebview_HighlightAllOccurencesOfStringForElement
 @abstract   // helper function, recursively searches in elements and their child nodes
 @discussion // helper function, recursively searches in elements and their child nodes

 element    - HTML elements
 keyword    - string to search
 */

function uiWebview_HighlightAllOccurencesOfStringForElement(element,keyword) {
    if (element) {
        if (element.nodeType == 3) {        // Text node

            var count = 0;
            var elementTmp = element;
            while (true) {
                var value = elementTmp.nodeValue;  // Search for keyword in text node
                var idx = value.toLowerCase().indexOf(keyword);

                if (idx < 0) break;

                count++;
                elementTmp = document.createTextNode(value.substr(idx+keyword.length));
            }

            uiWebview_SearchResultCount += count;

            var index = uiWebview_SearchResultCount;
            while (true) {
                var value = element.nodeValue;  // Search for keyword in text node
                var idx = value.toLowerCase().indexOf(keyword);

                if (idx < 0) break;             // not found, abort

                //we create a SPAN element for every parts of matched keywords
                var span = document.createElement("span");
                var text = document.createTextNode(value.substr(idx,keyword.length));
                span.appendChild(text);

                span.setAttribute("class","uiWebviewHighlight");
                span.style.backgroundColor="yellow";
                span.style.color="black";

                index--;
                span.setAttribute("id", "SEARCH WORD"+(index));
                //span.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);

                //element.parentNode.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);

                //uiWebview_SearchResultCount++;    // update the counter

                text = document.createTextNode(value.substr(idx+keyword.length));
                element.deleteData(idx, value.length - idx);

                var next = element.nextSibling;
                //alert(element.parentNode);
                element.parentNode.insertBefore(span, next);
                element.parentNode.insertBefore(text, next);
                element = text;
            }


        } else if (element.nodeType == 1) { // Element node
            if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') {
                for (var i=element.childNodes.length-1; i>=0; i--) {
                    uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i],keyword);
                }
            }
        }
    }
}

// the main entry point to start the search
function uiWebview_HighlightAllOccurencesOfString(keyword) {
    uiWebview_RemoveAllHighlights();
    uiWebview_HighlightAllOccurencesOfStringForElement(document.body, keyword.toLowerCase());
}

// helper function, recursively removes the highlights in elements and their childs
function uiWebview_RemoveAllHighlightsForElement(element) {
    if (element) {
        if (element.nodeType == 1) {
            if (element.getAttribute("class") == "uiWebviewHighlight") {
                var text = element.removeChild(element.firstChild);
                element.parentNode.insertBefore(text,element);
                element.parentNode.removeChild(element);
                return true;
            } else {
                var normalize = false;
                for (var i=element.childNodes.length-1; i>=0; i--) {
                    if (uiWebview_RemoveAllHighlightsForElement(element.childNodes[i])) {
                        normalize = true;
                    }
                }
                if (normalize) {
                    element.normalize();
                }
            }
        }
    }
    return false;
}

// the main entry point to remove the highlights
function uiWebview_RemoveAllHighlights() {
    uiWebview_SearchResultCount = 0;
    uiWebview_RemoveAllHighlightsForElement(document.body);
}

function uiWebview_ScrollTo(idx) {
    var scrollTo = document.getElementById("SEARCH WORD" + idx);
    if (scrollTo) scrollTo.scrollIntoView();
}

这将查找并高亮显示webview中所有出现的字符串，但我只希望高亮显示第一个出现的字符串。 例如，当我调用以下代码时：

highlightAllOccurencesOfString(str:"Hello")

“Hello”的所有实例都会在webview中突出显示：

Hello

Frank，

Hello

Noah

但我想要这个结果：

你好

弗兰克，你好，诺亚

如何修改javascript代码以仅突出显示搜索字符串的第一次出现

更新：我尝试了下面JonLuca的答案，但没有突出显示任何内容

---

如果有任何帮助，我们将不胜感激。

该函数的运行方式类似于一棵树，它会检查元素是否为文本节点，如果不是，它会在每个子元素上调用自己

您必须让调用者知道您找到了要突出显示的单个元素，然后离开

同样，通过它搜索的方式并不能保证你所考虑的是单词的“第一”出现将是文档体正文中的第一次出现。

在代码中，如果找到要突出显示的单词，则返回true，否则返回false。这将阻止它继续搜索。修改js，如下所示：

function uiWebview_HighlightAllOccurencesOfStringForElement(element, keyword) {
    if (element) {
        if (element.nodeType == 3) { // Text node

            var count = 0;
            var elementTmp = element;

            var value = elementTmp.nodeValue; // Search for keyword in text node
            var idx = value.toLowerCase().indexOf(keyword);

            if (idx < 0) {
                return false;
            }

            count++;
            elementTmp = document.createTextNode(value.substr(idx + keyword.length));


            uiWebview_SearchResultCount += count;

            var index = uiWebview_SearchResultCount;

            var value = element.nodeValue; // Search for keyword in text node
            var idx = value.toLowerCase().indexOf(keyword);

            if (idx < 0) {
                return false;
            } // not found, abort

            //we create a SPAN element for every parts of matched keywords
            var span = document.createElement("span");
            var text = document.createTextNode(value.substr(idx, keyword.length));
            span.appendChild(text);

            span.setAttribute("class", "uiWebviewHighlight");
            span.style.backgroundColor = "yellow";
            span.style.color = "black";

            index--;
            span.setAttribute("id", "SEARCH WORD" + (index));
            //span.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);

            //element.parentNode.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);

            //uiWebview_SearchResultCount++;    // update the counter

            text = document.createTextNode(value.substr(idx + keyword.length));
            element.deleteData(idx, value.length - idx);

            var next = element.nextSibling;
            //alert(element.parentNode);
            element.parentNode.insertBefore(span, next);
            element.parentNode.insertBefore(text, next);
            element = text;
            return true;


        } else if (element.nodeType == 1) { // Element node
            if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') {
                for (var i = element.childNodes.length - 1; i >= 0; i--) {
                    if (uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i], keyword)) {
                        return true;
                    }
                }
            }
        }
    }
}

函数uiWebview\u HighlightAlloccurrencesofStringForElement（元素，关键字）{
if（元素）{
如果（element.nodeType==3）{//Text节点
var计数=0；
var elementTmp=元素；
var value=elementTmp.nodeValue；//在文本节点中搜索关键字
var idx=value.toLowerCase（）.indexOf（关键字）；
if（idx<0）{
返回false；
}
计数++；
elementTmp=document.createTextNode（value.substr（idx+关键字.length））；
uiWebview\u SearchResultCount+=计数；
var index=uiWebview\u搜索结果帐户；
var value=element.nodeValue；//在文本节点中搜索关键字
var idx=value.toLowerCase（）.indexOf（关键字）；
if（idx<0）{
返回false；
}//找不到，中止
//我们为匹配关键字的每个部分创建一个SPAN元素
var span=document.createElement（“span”）；
var text=document.createTextNode（value.substr（idx，keyword.length））；
span.appendChild（文本）；
setAttribute（“类”、“uiWebviewHighlight”）；
span.style.backgroundColor=“黄色”；
span.style.color=“黑色”；
索引--；
setAttribute（“id”，“搜索词”+（索引））；
//span.setAttribute（“id”、“搜索词”+uiWebview\u SearchResultCount）；
//元素.parentNode.setAttribute（“id”，“搜索词”+uiWebview\u SearchResultCount）；
//uiWebview_SearchResultCount++；//更新计数器
text=document.createTextNode（value.substr（idx+关键字.length））；
element.deleteData（idx，value.length-idx）；
var next=element.nextSibling；
//警报（element.parentNode）；
element.parentNode.insertBefore（span，next）；
element.parentNode.insertBefore（文本，下一步）；
元素=文本；
返回true；
}如果（element.nodeType==1）{//element节点
if（element.style.display！=“无”&&element.nodeName.toLowerCase（）！=“选择”）{
对于（var i=element.childNodes.length-1；i>=0；i--）{
if（uiWebview_HighlightAlloccurrencesoFStringForElement（element.childNodes[i]，关键字））{
返回true；
}
}
}
}
}
}

这不能保证是正确的，也不能保证它涵盖了您的所有用例。然而，在第一次找到突出显示的单词时，我让它返回true。它应该停止执行，并且不突出显示任何其他单词

---

让我知道这是否有效-我现在没有能力测试它。

谢谢，但不幸的是，您的代码不起作用。没有突出显示：（你现在可以测试吗？@JonLuca，我也在寻找解决方案。我尝试了你的代码，但没有效果。你能建议其他解决方案吗？

function uiWebview_HighlightAllOccurencesOfStringForElement(element, keyword) {
    if (element) {
        if (element.nodeType == 3) { // Text node

            var count = 0;
            var elementTmp = element;

            var value = elementTmp.nodeValue; // Search for keyword in text node
            var idx = value.toLowerCase().indexOf(keyword);

            if (idx < 0) {
                return false;
            }

            count++;
            elementTmp = document.createTextNode(value.substr(idx + keyword.length));


            uiWebview_SearchResultCount += count;

            var index = uiWebview_SearchResultCount;

            var value = element.nodeValue; // Search for keyword in text node
            var idx = value.toLowerCase().indexOf(keyword);

            if (idx < 0) {
                return false;
            } // not found, abort

            //we create a SPAN element for every parts of matched keywords
            var span = document.createElement("span");
            var text = document.createTextNode(value.substr(idx, keyword.length));
            span.appendChild(text);

            span.setAttribute("class", "uiWebviewHighlight");
            span.style.backgroundColor = "yellow";
            span.style.color = "black";

            index--;
            span.setAttribute("id", "SEARCH WORD" + (index));
            //span.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);

            //element.parentNode.setAttribute("id", "SEARCH WORD"+uiWebview_SearchResultCount);

            //uiWebview_SearchResultCount++;    // update the counter

            text = document.createTextNode(value.substr(idx + keyword.length));
            element.deleteData(idx, value.length - idx);

            var next = element.nextSibling;
            //alert(element.parentNode);
            element.parentNode.insertBefore(span, next);
            element.parentNode.insertBefore(text, next);
            element = text;
            return true;


        } else if (element.nodeType == 1) { // Element node
            if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') {
                for (var i = element.childNodes.length - 1; i >= 0; i--) {
                    if (uiWebview_HighlightAllOccurencesOfStringForElement(element.childNodes[i], keyword)) {
                        return true;
                    }
                }
            }
        }
    }
}