locked
search inside page using javascript RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2062956768 posted

    friends

    I need tested code for searching text inside page HTML using textbox and button

    Thursday, May 30, 2019 3:39 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi mrzoz,

    According to your description, I suggest that you could use Window​.find() to find the text you want.

    Here is a demo and maybe you could refer to.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" id="SearchTxt" /><input type="button" id="SearchBtn" value="Search" onclick="doSearch(document.getElementById('SearchTxt').value)" />
    <div style="font-size:20px">
        Apples, Bananas, and Oranges.
    </div>
    <script>
        function doSearch(text) {
            if (window.find(text)) {
                console.log(window.find(text));
            }
        }
    </script>
</body>
</html>

    result:

    Besides, you could also refer to this link with a more perfect sample: How to search text on web page similar to (CTRL + F) using jQuery

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 31, 2019 3:30 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi mrzoz,

    According to your description, I suggest that you could use Window​.find() to find the text you want.

    Here is a demo and maybe you could refer to.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" id="SearchTxt" /><input type="button" id="SearchBtn" value="Search" onclick="doSearch(document.getElementById('SearchTxt').value)" />
    <div style="font-size:20px">
        Apples, Bananas, and Oranges.
    </div>
    <script>
        function doSearch(text) {
            if (window.find(text)) {
                console.log(window.find(text));
            }
        }
    </script>
</body>
</html>

    result:

    Besides, you could also refer to this link with a more perfect sample: How to search text on web page similar to (CTRL + F) using jQuery

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 31, 2019 3:30 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1038772411 posted

    Hello mrzoz,

    Please find below code , I hope this will help

    <input id="searcher" type="text" name="searcher">
    $('#searcher').quicksearch('table tbody tr', {
    'delay': 100,
    'bind': 'keyup keydown',
    'show': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        $(this).addClass('show');
    },
    'onAfter': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        if ($('.show:first').length > 0){
            $('html,body').scrollTop($('.show:first').offset().top);
        }
    },
    'hide': function() {
        $(this).removeClass('show');
    },
    'prepareQuery': function(val) {
        return new RegExp(val, "i");
    },
    'testQuery': function(query, txt, _row) {
        return query.test(txt);
    }
});

$('#searcher').focus();

    Try it out here: http://jsfiddle.net/ZLhAd/369/

    For more information refer below link

    https://stackoverflow.com/questions/4327416/javascript-find-text-within-a-page-and-jump-to-location-in-page

    Thank you.

    Friday, May 31, 2019 5:22 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2062956768 posted

    Jenifer Jian

    Thank you so much very for your help it is very easy and nice

    can I add some feature like

    • search beginning of the document
    • find next
    • if not found display alert to user not found

    Thank you so much

    Saturday, June 8, 2019 6:17 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi mrzoz,

    can I add some feature like

    • search beginning of the document
    • find next
    • if not found display alert to user not found

    Yes, you can. You could refer to my shared link above to see the wonderful sample.

    <head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function searchAndHighlight(searchTerm, selector) {
            if (searchTerm) {
                var selector = selector || "#realTimeContents";
                var searchTermRegEx = new RegExp(searchTerm, "ig");
                var matches = $(selector).text().match(searchTermRegEx);
                if (matches != null && matches.length > 0) {
                    $('.highlighted').removeClass('highlighted');
                    $span = $('#realTimeContents span');
                    $span.replaceWith($span.html());
                    if (searchTerm === "&") {
                        searchTerm = "&amp;";
                        searchTermRegEx = new RegExp(searchTerm, "ig");
                    }
                    $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
                    $('.match:first').addClass('highlighted');
                    var i = 0;
                    $('#NextBtn').off('click').on('click', function () {
                        i++;
                        if (i >= $('.match').length) i = 0;
                        $('.match').removeClass('highlighted');
                        $('.match').eq(i).addClass('highlighted');
                        $('.ui-mobile-viewport').animate({
                            scrollTop: $('.match').eq(i).offset().top
                        }, 300);
                    });
                    $('#PreBtn').off('click').on('click', function () {
                        i--;
                        if (i < 0) i = $('.match').length - 1;
                        $('.match').removeClass('highlighted');
                        $('.match').eq(i).addClass('highlighted');
                        $('.ui-mobile-viewport').animate({
                            scrollTop: $('.match').eq(i).offset().top
                        }, 300);
                    });
                    if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
                        $(window).scrollTop($('.highlighted:first').position().top);
                    }
                    return true;
                }
            }
            return false;
        }
        $(document).on('click', '#SearchBtn', function (event) {
            $(".highlighted").removeClass("highlighted").removeClass("match");
            if (!searchAndHighlight($('#SearchTxt').val())) {
                alert("No results found");
            }
        });
    </script>
    <style type="text/css">
        .highlighted {
            background-color: yellow;
        }

        .highlight {
            background-color: #fff34d;
            -moz-border-radius: 5px; /* FF1+ */
            -webkit-border-radius: 5px; /* Saf3-4 */
            border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
        }

        .highlight {
            padding: 1px 4px;
            margin: 0 -4px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input type="text" id="SearchTxt" />
        <input type="button" id="SearchBtn" value="Search" />
        <input type="button" id="NextBtn" value="Next" />
        <input type="button" id="PreBtn" value="Previous" />
        <div id="realTimeContents">
            asiyusuioaufiudiofuigoepgirtigrtiohigprthiryih]piriyhporportlrth<br />
            wjehrihevcfddjkhfguisfhiowriihftuierhgruehuightrioethioreutiourepotu<br />
            asugduayfuewu9ur98uerefuriewofhuiyufiodhfsiuufhdjkdjshfsafhas
        </div>
    </form>
</body>
</html>

    Best Regards,

    Jenifer

    Monday, June 10, 2019 2:30 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2062956768 posted

    Hi Jenifer 

    laughing

    The code very useful but I face many problems with last code I used span frequently in my HTML Page when running the search you post 

    the span becomes emptied or become null

    How can I use this code with span in my HTML DOC

    Thank you 

    Saturday, July 6, 2019 7:03 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi mrzoz,

    I'm sorry that the above suggested code may cause some bug like when you use span.

    The suggested ways I've mentioned in your latest post, please check.

    Best Regards,

    Jenifer

    Monday, July 8, 2019 8:21 AM