如何借助js突出顯示html中的搜索文本？

Question

我在JavaScript經歷了非常非常的艱難，而對jQuery了解卻為零。 我試圖借助JavaScript和jQuery突出顯示頁面或正文中的文本。

經過艱苦的嘗試，我使用突出顯示來管理搜索代碼。

我的HTML代碼：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/javascripts/application.js" type="text/javascript">
</head>

<body>
    Search: <input type="text" id="text-search" />
    <p>
        <b>Demo </b> he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech’s solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information.
    </p>
</body>

我用jQuery和JavaScript編寫的完整代碼：

jQuery.fn.highlight = function(pat) {

    function innerHighlight(node, pat) {

        var skip = 0;

        if (node.nodeType == 3) {

            var pos = node.data.toUpperCase().indexOf(pat);

            if (pos >= 0) {

                var spannode       = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit      = node.splitText(pos);
                var endbit         = middlebit.splitText(pat.length);
                var middleclone    = middlebit.cloneNode(true);

                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);

                skip               = 1;

            }

        } else if (node.nodeType == 1 && node.childNodes && !/(script|style) /i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {

                i += innerHighlight(node.childNodes[i], pat);

            }

        }

        return skip;

    }

    return this.each(function() {

        innerHighlight(this, pat.toUpperCase());

    });

 };

jQuery.fn.removeHighlight = function() {

    function newNormalize(node) {

        for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {

            var child = children[i];

            if (child.nodeType == 1) {

                newNormalize(child);
                continue;

            }

            if (child.nodeType != 3) { continue; }

            var next = child.nextSibling;

            if (next == null || next.nodeType != 3) { continue; }

            var combined_text = child.nodeValue + next.nodeValue;
            new_node          = node.ownerDocument.createTextNode(combined_text);

            node.insertBefore(new_node, child);
            node.removeChild(child);
            node.removeChild(next);
            i--;
            nodeCount--;

        }

    }

    return this.find("span.highlight").each(function() {

        var thisParent = this.parentNode;
        thisParent.replaceChild(this.firstChild, this);
        newNormalize(thisParent);

    }).end();

};

$(function() {

    $('#text-search').bind('keyup change', function(ev) {

        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) {

            // highlight the new term
            $('body').highlight( searchTerm );

        }

    });

});

.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;
}

請不要問我更多信息。 每件事都在評論部分給出。 伙計們，請幫助我。

Answer 1

我在您的示例中看到的唯一問題是在此行中

<script src="/javascripts/application.js" type="text/javascript">

正在查找此.js，但由於未創建此突出顯示功能而未找到它。

嘗試對此進行更改，並添加具有不同腳本標記的application.js。

<script type="text/javascript">

工作實例

 .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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.highlight = function(pat) { function innerHighlight(node, pat) { var skip = 0; if (node.nodeType == 3) { var pos = node.data.toUpperCase().indexOf(pat); if (pos >= 0) { var spannode = document.createElement('span'); spannode.className = 'highlight'; var middlebit = node.splitText(pos); var endbit = middlebit.splitText(pat.length); var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); skip = 1; } } else if (node.nodeType == 1 && node.childNodes && !/(script|style) /i.test(node.tagName)) { for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); } } return skip; } return this.each(function() { innerHighlight(this, pat.toUpperCase()); }); }; jQuery.fn.removeHighlight = function() { function newNormalize(node) { for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { var child = children[i]; if (child.nodeType == 1) { newNormalize(child); continue; } if (child.nodeType != 3) { continue; } var next = child.nextSibling; if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(function() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); newNormalize(thisParent); }).end(); }; </script> <body> Search: <input type="text" id="text-search" /> <p> <b>Demo </b> he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech's solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information. </p> <script type="text/javascript"> $(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); // remove any old highlighted terms $('body').removeHighlight(); // disable highlighting if empty if ( searchTerm ) { // highlight the new term $('body').highlight( searchTerm ); } }); }); </script> </body>

如何借助js突出顯示html中的搜索文本？

問題描述

1 個解決方案

解決方案1
2 已采納 2017-01-08 14:46:54

如何借助js突出顯示html中的搜索文本？

問題描述

1 個解決方案

解決方案1 2 已采納 2017-01-08 14:46:54

解決方案1
2 已采納 2017-01-08 14:46:54