Highlight a text from html document

Question

I am new to web development. Here, I want to highlight the text from the html document. I am using text-angular for showing the html document. Let's say this is a document:

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

This whole document is having a div with id ="textcontent".

This is a Html document, which represents it

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

Here, I am able to highlight a single word from this text. what I want is to highlight a whole text like from Description to the word, which I am getting as an input. I tried Different options like,

Currently, I have the following code with which it highlights the text which is in one span. But if the half of highlighting text is in one span and half is in another span it it is not working.

Code is like:

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

How can I handle this?

Could you please add some valid HTML content, And how are you calling the function — Alpesh Jikadra, Mar 20 '18 at 09:05
Calling the highlight function like highlight(id of div, text which I want to highlight ); — ganesh kaspate, Mar 20 '18 at 09:12
Basically in your code you are passing one bye one node value to checkAndReplace function and you care comparing whole sentence with single node value where your whole text is distributed between multiple nodes. — Alpesh Jikadra, Mar 20 '18 at 09:30
Can you make some edit in the function , because I tried but no luck. — ganesh kaspate, Mar 20 '18 at 09:38
yes, But there is a mark.js but it is for highlighting single words. — ganesh kaspate, Mar 20 '18 at 10:59

shafrianadhi · Answer 1 · 2018-03-23T13:49:17.300

0

Indeed i have catched little bit about your question, but the core of your question is about how to highlight some text that called paragraph. Like this ?

Maybe you can try this answer , this is using jquery.mark and you able to highlights the text that you want by the keywords. i hope it will helpful for you.

Here for the simple usage:

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

edited Mar 23 '18 at 13:49

answered Mar 23 '18 at 12:37

shafrianadhi

642
5
8

Highlight a text from html document

1 Answers1