Filter your rows by the child elements attribute [href*=""]
containing *=
a value.
Notice that this is not the best way to build Search functionality, since users most probably 1: never search URIs, 2: they will not understand how is the result related to their search query if the visible result has nowhere to be seen the term they searched for**.
But here you go anyways.
PS: the below code will also work if you have multiple HREF attributed elements in a single row!
const $rows = $("#items").find("tr"); // Collect all TBODY's TR
function searchHref(val) {
val = val.trim(); // Trim it, you don't want spaces to account
if (!val) return $rows.removeClass("is-hidden"); // Show all if empty search
// Get rows which contain one or more [href] elements
// containing the search value:
const $rowsMatch = $rows.filter((i, TR) => $('[href*="'+ val +'"]', TR).length);
// Hide all but the matching ones:
$rows.not($rowsMatch).addClass('is-hidden');
// Show matching ones:
$rowsMatch.removeClass('is-hidden');
}
$("#search").on("keyup", function() {
searchHref(this.value);
});
.is-hidden { display: none; }
<input type=text id="search" placeholder="Search by URI">
<table>
<thead>
<tr>
<th>id</th>
<th>desc</th>
<th>nvm</th>
</tr>
</thead>
<tbody id="items">
<tr>
<td>1</td>
<td><a href="https://www.google.com">Popular search engine</a></td>
<td>google</td>
</tr>
<tr>
<td>2</td>
<td><a href="https://www.stackoverflow.com">Programming Q&A</a></td>
<td>stackoverflow</td>
</tr>
<tr>
<td>3</td>
<td><a href="https://area51.stackexchange.com/">Aliens</a></td>
<td>area51</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>