javascript - 如何使用 JavaScript 更改字符串中特定字符的颜色？

Question

我正在使用此代码使用表搜索功能 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table . 当用户使用“Jac”等搜索字符搜索任何行数据时，我只想更改这 3 个字符的颜色并显示整行。我怎样才能改变这 3 个字符的颜色？或者搜索输入字符？ 编辑 - 我的代码是:

$("#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 = "";
    }
}

});

以上代码的输出不正确。只有当搜索字符串的长度大于 1 时，它才会起作用。如果我输入 3 个字符，它会失败。

Answer 1

可能是一种矫枉过正的方法。但这就是我让它工作的方式。

技术:

1- 将原始表(作为整个 DOM)放入 JS 变量中

2- 将该变量克隆到另一个 JS 变量中。

3- 克隆用作引用。将保持原样，永远不会被修改。

4- 突出显示通过提取找到的短语来工作，用 <span> 包裹具有该跨度的内容会被赋予一定的 CSS 以从文本的其余部分中脱颖而出。

---

这背后的原因是，如果我们编辑原始表格，然后再次尝试搜索，插入的 HTML 标记将包含在搜索词中，因此搜索将失败。

我们将始终搜索克隆，然后从克隆中获取文本，对其进行处理，然后将新处理的短语应用到原始表中。换句话说，如果在克隆对象中找到搜索的短语，则其内容将被复制到原始表中。

---

如果我再次这样做，我会用 JQuery 替换整个东西。但无论如何，这段代码需要优化。

       
            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>