How to find and highlight text between tags in WKWebView webpage - Like browser find feature

How to find and highlight text in WKWebView? I have search option in my app which will search text inside WKWebview. I have to highlight the searched text in WKWebView.

I want to get "browser Find feature" in WKWebView. I have tried some code in Mac browser which is working in Mac browser but not working in iPhone WKWebView.

I want search text between tags.

<!DOCTYPE html>
<html>
    <head>
        <title>Test page for Highlight Search Terms</title>
    </head>
    <body>
        
        <input type="text" id="search" autofocus  onkeyup="highlight(document.getElementById('search').value);" />
       
        <div id="content">
            <p>Here is some searchable <b>text</b> with some lápices in it, and more lápices, and some <b>for<i>mat</i>t</b>ing</p>
        </div>
        
        
        <script type="text/javascript">
            
            function highlight(text) {
                let colour = "#ff0";
                
                unhighlight(document.body, 'ffff00');
                
                while (window.find(text)) {
                    var range, sel;
                    if (window.getSelection) {
                        // IE9 and non-IE
                        
                        try {
                            if (!document.execCommand("BackColor", false, colour)) {
                                makeEditableAndHighlight(colour);
                            }
                        } catch (ex) {
                            makeEditableAndHighlight(colour)
                        }
                    } else if (document.selection && document.selection.createRange) {
                        // IE <= 8 case
                        range = document.selection.createRange();
                        range.execCommand("BackColor", false, colour);
                    }
                }
            }
        
        function makeEditableAndHighlight(colour) {
            var range, sel = window.getSelection();
            if (sel.rangeCount && sel.getRangeAt) {
                range = sel.getRangeAt(0);
            }
            document.designMode = "on";
            if (range) {
                sel.removeAllRanges();
                sel.addRange(range);
            }
            // Use HiliteColor since some browsers apply BackColor to the whole block
            if (!document.execCommand("HiliteColor", false, colour)) {
                document.execCommand("BackColor", false, colour);
            }
            document.designMode = "off";
        }
        
        
        function unhighlight(node, colour) {
            
            if (node.nodeType == 1) {
                var bg = node.style.backgroundColor;
                node.style.backgroundColor = "";
            }
            var child = node.firstChild;
            while (child) {
                unhighlight(child, colour);
                child = child.nextSibling;
            }
        }
        </script>
    </body>
</html>