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)!


    }

这会查找并突出显示webview中所有出现的字符串，但我只希望突出显示第一个匹配项。例如，当我打电话时使用此代码：

highlightAllOccurencesOfString(str:"Hello")

＆＃34; Hello＆＃34;的所有实例在webview中突出显示：

Hello弗兰克，Hello诺亚

但我想要这个结果：

Hello弗兰克，你好诺亚

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

更新：我在下面尝试过JonLuca的回答，但没有突出显示。

非常感谢任何帮助

Answer 1

该函数像树一样运行，它检查元素是否是文本节点，如果不是，它会在每个子节点上调用它自己。

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

此外，搜索它的方式并不能保证你所考虑的是＆＃34;第一个＆＃34;单词的出现将是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。它应该停止执行而不是突出显示任何其他单词。

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

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

1 个答案: