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

Question

我使用下面的 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();
}

在我的 ViewController.swift 文件中，我加载了 javascript 文件并执行如下搜索:

func highlightAllOccurencesOfString(str:String) -> Int {
        let path = Bundle.main.path(forResource: "UIWebViewSearch", ofType: "js")

        var jsCode = ""

        do{

            jsCode = try String(contentsOfFile: path!)

               myWebView.stringByEvaluatingJavaScript(from: jsCode)

        let startSearch = "uiWebview_HighlightAllOccurencesOfString('\(str)')"

        myWebView.stringByEvaluatingJavaScript(from: startSearch)

        let result = myWebView.stringByEvaluatingJavaScript(from: "uiWebview_SearchResultCount")!

        }catch
        {
            // do something

        }



        return  Int(result)!


    }

这会查找并突出显示 web View 中出现的所有字符串，但我只想突出显示第一个出现的字符串。例如，当我调用此代码时:

highlightAllOccurencesOfString(str:"Hello")

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

你好 弗兰克，你好 诺亚

但我想要这样的结果:

你好 弗兰克，你好诺亚

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

更新:我在下面尝试了 JonLuca 的回答，但没有突出显示任何内容。

任何帮助将不胜感激

Answer 1

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

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

此外，这种搜索方式并不能保证您认为“第一次”出现的单词将是 document.body 树中的第一次出现。

在代码中，如果找到要突出显示的单词，则让它返回 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;
                    }
                }
            }
        }
    }
}

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

让我知道这是否有效 - 我现在没有能力对其进行测试。