RegExp - Заменить некоторые символы между <td> markups

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

Есть три случая, когда он не работает должным образом: если я ищу «д», «т» или 'г '(потому что замены сделаны в наклейках <td> или <tr>).

Вот пример переменной содержания:
"<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>, но я не нахожу правильный синтаксис.

Есть ли у кого-нибудь идеи (чистый JavaScript и/или jQuery)?

Answer 1

Мой совет - запустить регулярное выражение ПЕРЕД Встраиванием e строк в td, и делать это на каждой линии индивидуально. Я хотел бы создать функцию внутри AJAX вызова, как это:

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) 
 
. 
 
. 
 
. 
 
.

тогда я обернуть каждую из строк в содержание так же, как вы сделали.

Это мой подход, по крайней мере.

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>