Question

我使用此代码使用表搜索功能 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table。当用户使用某些搜索字符（如＆＃34; Jac＆＃34;）搜索任何行数据时，我只想更改这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

捕获搜索短语（您正在搜索或查找的单词）。捕获搜索区域（您要搜索的表格或段落）。查看搜索区域以查看是否可以找到搜索短语。一旦存在，请替换为围绕它的HTML元素标记的字符串。

将搜索到的单词替换为相同的单词，但包含在具有特定CSS类的范围内。使用CSS自定义外观。

  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>

Answer 2

可能是一种矫枉过正的做法。但这就是我如何运作的。

技术：

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>

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

2 个答案:

技术：