How to change the color of particular characters of string using JavaScript?

Question

I am using table search functionality using this code - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table. When user search for any row data using some search characters like "Jac", I want to change the color of these 3 characters only and want to show entire row. How can I change the color of these 3 characters? Or search input characters? EDIT - My code is:

$("#searchBox").keyup(function() {
var input, filter, table, tr, td, i;
input = document.getElementById("searchBox");
filter = input.value.toUpperCase();
if (filter.length > 1) {
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

                var regx = new RegExp(filter, "g");
                var newstring = td.innerHTML.replace(regx, '<span class="highlight">' + filter + '</span>');
                td.innerHTML = newstring;
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
} else {
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        tr[i].style.display = "";
    }
}

});

Output of above code is not correct. It will work only when length of search string is more than 1. If I enter 3 characters it failed.

Possible duplicate of [How to highlight text using javascript](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) — yuriy636, Jul 21 '17 at 08:04
@Nitesh Jquery is a javascript library designed to shorten the effort of using JS. Kindly check my answer and run the code snippet to test it and see how it works. — Mohammed Joraid, Jul 21 '17 at 08:45

Mohammed Joraid · Answer 1 · 2017-07-21T14:11:17.073

2

Capture the search phrase (the word you are searching or looking for). Capture the search area (the table or paragraph you are searching into). Look into the search area to see if you can find the search phrase. Once it exists, replace with a string that has an HTML element tag surrounding it.

Replace the searched word with the same word but wrapped in a span that has certain CSS class. Use CSS to customize the look.

  var toLookInto = $("#toLookInto").html();

$("#toFind").on("keyup", function() {
  var toFind = $("#toFind").val();
  var regx = new RegExp(toFind, "g");
  var newstring = toLookInto.replace(regx, '<span class="highlight">' + toFind + '</span>')

  $("#toLookInto").html(newstring)

});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<p id="toLookInto">
  dummy text foo bar cat mewo dummy text foo bar cat mewo dummy text foo something odd bar cat mewo dummy text foo bar cat mewo
</p>

<br>

<input type "text" id="toFind" />
<lable>The text field will be triggered on every key pressed</label>

edited Jul 21 '17 at 14:11

answered Jul 21 '17 at 08:30

Mohammed Joraid

6,202
2
27
38

I have tried your code and added to this question also. But it is not working – Nitesh Jul 24 '17 at 09:15
@Nitesh You mean running the code snippet directly from my answer does not work? – Mohammed Joraid Jul 24 '17 at 09:36
@Nitesh ok, I get what you meant. Applying my answer to your code did not work. Lemme take a look at w3schools example. – Mohammed Joraid Jul 24 '17 at 09:45
Yes. Thanks for looking into it. Actually your code snippet is working fine. But after applying to my code, it failed. – Nitesh Jul 24 '17 at 10:36

Mohammed Joraid · Accepted Answer · 2017-07-24T12:43:05.040

Might be an overkill approach. But this how I got it working.

The technique:

1- Get the original table (as a whole DOM) into a JS variable

2- Clone that variable into another JS variable.

3- The clone is used as a reference. Will remain intact never be modified.

4- The highlight works by extracting the found phrase, wrap with a <span> having that span is given a certain CSS to stand out from the rest of the text.

The reason behind this is that, if we edit the original table, and then we try to search again, the HTML tag that got inserted will be included in the searched terms and therefore, the search will break down.

We will be searching the clone always, then will get the text from the clone, process it, and then apply the new processed phrase to the original table. In other words, If the searched phrase is found in the clone object, its content will be copied over to the original table.

If I were to do this again, I would replace the whole thing with JQuery. But anyhow, this code needs to be optimized.

       
            var originalTable = document.getElementById("myTable");
            var realTr = originalTable.getElementsByTagName("tr");

         
            var cloneTable = originalTable.cloneNode(true);
            var cloneTr = cloneTable.getElementsByTagName("tr");

            function myFunction() {


                var input, filter, cloneTd, cloneTdValue, realTd, i, inputValue, inputValueUpper;


                input = document.getElementById("myInput");
                inputValue = input.value;
                inputValueUpper = inputValue.toUpperCase();


                for (i = 0; i < cloneTr.length; i++) {

                    cloneTd = cloneTr[i].getElementsByTagName("td")[0];

                    if (cloneTd) {

                        var cloneTdValue = cloneTd.innerHTML;
                        var cloneTdValueUpper = cloneTdValue.toUpperCase();
                        var index = cloneTdValueUpper.indexOf(inputValueUpper);

                        if (index > -1) {

                            var newStr = wrapStuff(inputValue, cloneTdValue, index);

                            realTr[i].style.display = "";
                            realTd = realTr[i].getElementsByTagName("td")[0];
                            realTd.innerHTML = newStr;



                        } else {
                            realTr[i].style.display = "none";
                        }
                    }
                }
            }


            function wrapStuff(input, tdStr, index) {

                if (input.length === 0)
                {
                    return tdStr;
                }


                var before, after, searched, extractLen, extractedVal, newString;

                extractLen = index + input.length;
                before = tdStr.substring(0, index);
                after = tdStr.substring(extractLen, tdStr.length);

                var newIndex = after.indexOf(input);
                 
                //Recursive function: yeah, my head got spinning. 
                //this is to apply the same code to the second half of the spliced string, because indexOf will only find the first occurance. 
                if (newIndex > -1) {
                    after = wrapStuff(input, after, newIndex);
                }

                extractedVal = tdStr.substring(index, extractLen);

                newString = before + "<span class=\"highlight\">" + extractedVal + "</span>" + after;


                return newString;

            }

    * {
                box-sizing: border-box;
            }

            #myInput {
                background-image: url('/css/searchicon.png');
                background-position: 10px 10px;
                background-repeat: no-repeat;
                width: 100%;
                font-size: 16px;
                padding: 12px 20px 12px 40px;
                border: 1px solid #ddd;
                margin-bottom: 12px;
            }

            #myTable {
                border-collapse: collapse;
                width: 100%;
                border: 1px solid #ddd;
                font-size: 18px;
            }

            #myTable th, #myTable td {
                text-align: left;
                padding: 12px;
            }

            #myTable tr {
                border-bottom: 1px solid #ddd;
            }

            #myTable tr.header, #myTable tr:hover {
                background-color: #f1f1f1;
            }
            .highlight {
                color: red;
            }

 <body>

        <h2>My Customers</h2>

        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

        <table id="myTable">
            <tr class="header">
                <th style="width:60%;">Name</th>
                <th style="width:40%;">Country</th>
            </tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Berglunds snabbkop</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td>Island Trading</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Koniglich Essen</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Laughing Bacchus Winecellars</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Italy</td>
            </tr>
            <tr>
                <td>North/South</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Paris specialites</td>
                <td>France</td>
            </tr>
        </table>

        <script>

        </script>

    </body>

-Thank you so much. It is working for me now. Great work Sir. :) — Nitesh, Jul 24 '17 at 14:27

How to change the color of particular characters of string using JavaScript?

2 Answers2

The technique: