Question

我编写了一个AJAX函数来在数据库中创建搜索引擎。我想在显示的结果中以黄色突出显示搜索到的字符。

以下代码运作良好：

$.ajax({
    type: "GET",
    url: "search_db.php",
    data: "q="+valueSearch,
    dataType: "JSON",
    success: function(returnQuery) {
        $("#table tbody").empty();
        // console.log(returnQuery);
        $.each(returnQuery, function(i, line) {
            content = '<tr>';
            content += '<td>' + line.name_serv + '</td>';
            content += '<td>' + line.name_dns + '</td>';
            content += '<td>' + line.ip + '</td>';
            content += '<td>' + line.pass1 + '</td>';
            content += '<td>' + line.pass2 + '</td>';
            content += '</tr>';

            re = new RegExp('('+valueSearch+')', "gi")
            content2 = content.replace(re, '<span style="background-color: #ffff66;">$1</span>');

            $(content2).appendTo("#table tbody");
        });
    }, 
    error: function() {
        $("#table tbody").empty();
    }
});

有三种情况不能正常工作：如果我搜索 d ＆＃39; t ＆＃39;或者＆＃39; r ＆＃39; （因为重新审核也是在<td>或<tr>标记中进行的。

以下是变量 content 的示例：
"<tr><td>Jupiter</td><td>mail.test.com</td><td>10.0.0.1</td><td>root</td><td>a$01'deK</td></tr>"

我尝试制作一个RegExp，仅将<span>标记添加到与<td>和</td>之间的搜索匹配的字符，但我找不到正确的语法。< / p>

有没有人有想法（纯JavaScript和/或jQuery）？

Answer 1

我的建议是在将行嵌入到td＆＃39; s之前运行正则表达式，并在每行上单独执行。我会在ajax调用中创建一个函数，如下所示：

＆＃13;

highlightMatches(line, valueSearch))
{

re = new RegExp('('+valueSearch+')', "gi")
line2 = line.replace(re, '<span style="background-color: #ffff66;">$1</span>');

  return line2;
}



line.name_serv = highlightMatches(line.name_serv, valueSearch)
line.name_dns  = highlightMatches(line.name_dns, valueSearch)
.
.
.
.

＆＃13;

然后我就像你已经完成的那样将每一行包装成内容。

这至少是我的方法。

Answer 2

这是一种简化的方法，用于突出标记之外t的所有出现：

content = content.replace(/<.*?>|(t)/gi, function(match, captured) {
  if (!captured)
    return match;

  return '<span class="hl">' + captured + '</span>';
});

你可以轻松地概括这种方法，只是不要忘记逃避正则表达式元字符：

function highlightTextInHtml(content, search) {
  // Escape regex metacharacters
  search = search.replace(/[-\\()\[\]{}^$*+.?|]/g, '\\$&');
  
  // Build the regex
  var re = new RegExp("<.*?>|(" +search+ ")", "gi");
  
  // Highlight matches
  return content.replace(re, function(match, captured) {
    if (!captured)
      return match;

    return '<span class="hl">' + captured + '</span>';
  });
}

$(document).on("ready", function() {
  var originalContent = $("#content").html();

  $("#search").on("keyup", function() {
    $("#content").html(highlightTextInHtml(originalContent, $("#search").val()));
  }).triggerHandler("keyup");
});

td { border: 1px solid black; }
.hl { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    Search for: <input type="text" id="search" value="t"/>
</div>

<div id="content">
  <table>
    <tr><td>Jupiter</td><td>mail.test.com</td><td>10.0.0.1</td><td>root</td><td>a$01'deK</td></tr>
  </table>
</div>

RegExp - 替换标记之间的一些字符

2 个答案: