Question

我是网络开发的新手。在这里，我想突出显示html文档中的文本。我使用text-angular来显示html文档。让我们说这是一份文件：

        <!DOCTYPE html>
    <html>
        <head>
            <title>Example of Text Highlight</title>
            <style type="text/css" media="screen">
                .highlight{ background: #D3E18A;}
                .light{ background-color: yellow;}
            </style>
        </head>
        <body>
            <div id="testDocument">
                <p style="padding:0;color:#000000;font-size:12pt;line-height:1.0;margin-right:0;margin-left:72pt;text-indent:-72pt;font-family:&quot;Times New Roman&quot;;margin-top:0;orphans:2;margin-bottom:0;widows:2;text-align:justify"><span style="vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-weight:700">Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-style:normal">Developed web app for add management.</span></p>
<span style="vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-weight:700">Contribution:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="vertical-align:baseline;font-size:11pt;font-family:&quot;Calibri&quot;;font-weight:400">It was the internal use web app for the <br>we developed the app for the add management for the.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
        </body>
    </html>

整个文档都有id ="textcontent"的div。

这是一个Html文档，代表它

Description:        Developed web app for add management.

Contribution:        It was the internal use web app for the
we developed the app for the add management for the

在这里，我可以突出显示本文中的单个单词。我想要的是突出显示来自Description to the单词的整个文本，我将其作为输入。我尝试了不同的选项，比如，

目前，我有以下代码，用以突出显示一个span中的文本。但是，如果突出显示文本的一半在一个跨度中，而另一半在另一个跨度中，则它不起作用。

代码就像：

var InstantSearch = {

    "highlight": function (container, highlightText)
    {
        var internalHighlighter = function (options)
        {

            var id = {
                container: "container",
                tokens: "tokens",
                all: "all",
                token: "token",
                className: "className",
                sensitiveSearch: "sensitiveSearch"
            },
            tokens = options[id.tokens],
            allClassName = options[id.all][id.className],
            allSensitiveSearch = options[id.all][id.sensitiveSearch];


            function checkAndReplace(node, tokenArr, classNameAll, sensitiveSearchAll)
            {
                var nodeVal = node.nodeValue, parentNode = node.parentNode,
                    i, j, curToken, myToken, myClassName, mySensitiveSearch,
                    finalClassName, finalSensitiveSearch,
                    foundIndex, begin, matched, end,
                    textNode, span, isFirst;

                for (i = 0, j = tokenArr.length; i < j; i++)
                {
                    curToken = tokenArr[i];
                    myToken = curToken[id.token];
                    myClassName = curToken[id.className];
                    mySensitiveSearch = curToken[id.sensitiveSearch];

                    finalClassName = (classNameAll ? myClassName + " " + classNameAll : myClassName);

                    finalSensitiveSearch = (typeof sensitiveSearchAll !== "undefined" ? sensitiveSearchAll : mySensitiveSearch);

                    isFirst = true;
                    while (true)
                    {
                        if (finalSensitiveSearch)
                            foundIndex = nodeVal.indexOf(myToken);
                        else
                            foundIndex = nodeVal.toLowerCase().indexOf(myToken.toLowerCase());

                        if (foundIndex < 0)
                        {
                            if (isFirst)
                                break;

                            if (nodeVal)
                            {
                                textNode = document.createTextNode(nodeVal);
                                parentNode.insertBefore(textNode, node);
                            } // End if (nodeVal)

                            parentNode.removeChild(node);
                            break;
                        } // End if (foundIndex < 0)

                        isFirst = false;


                        begin = nodeVal.substring(0, foundIndex);
                        matched = nodeVal.substr(foundIndex, myToken.length);

                        if (begin)
                        {
                            textNode = document.createTextNode(begin);
                            parentNode.insertBefore(textNode, node);
                        } // End if (begin)

                        span = document.createElement("span");
                        span.className += finalClassName;
                        span.appendChild(document.createTextNode(matched));
                        parentNode.insertBefore(span, node);

                        nodeVal = nodeVal.substring(foundIndex + myToken.length);
                    } // Whend

                } // Next i 
            }; // End Function checkAndReplace 

            function iterator(p)
            {
                if (p === null) return;

                var children = Array.prototype.slice.call(p.childNodes), i, cur;

                if (children.length)
                {
                    for (i = 0; i < children.length; i++)
                    {
                        cur = children[i];
                        if (cur.nodeType === 3)
                        {
                            checkAndReplace(cur, tokens, allClassName, allSensitiveSearch);
                        }
                        else if (cur.nodeType === 1)
                        {
                            iterator(cur);
                        }
                    }
                }
            }; // End Function iterator

            iterator(options[id.container]);
        } // End Function highlighter
        ;


        internalHighlighter(
            {
                container: container
                , all:
                    {
                        className: "highlighter"
                    }
                , tokens: [
                    {
                        token: highlightText
                        , className: "highlight"
                        , sensitiveSearch: false
                    }
                ]
            }
        ); // End Call internalHighlighter 

    } // End Function highlight

};


function TestTextHighlighting(highlightText)
{
    var container = document.getElementById("textcontent");
    InstantSearch.highlight(container, highlightText);
}

我该如何处理？

Answer 1

事实上，我对你的问题有点了解，但你问题的核心是如何突出显示一些称为段落的文本。喜欢这个？

也许您可以试试这个answer，这是使用jquery.mark，您可以突出显示关键字所需的文本。我希望它对你有所帮助。

这里有简单的用法：

$(".context").mark("keyword");

突出显示html文档中的文本

1 个答案: