Highlight search word by adding span?

Question

Currently try to highlight the "searched term" found in the "table" by putting the "results found" into a <span>. I get an error of "unexpected string" and with no results. Can some take a look and tell me where I am doing wrong?

//string are words in table
var str = ("table#id tr td");
//regexp is the word entered in input field
var re = $("#search-criteria");

var found = str.match(re);
console.log(found);

if (found !== "")
{
    //surround word found with span
    $(found).appendTo($"<span class="s_val">");}
else
{
    //remove all span.s_val if not found
    $("table#id tr td").children(.s_val).remove;
}

span.s_val{
    background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <input type="text" id="search-criteria" />
</div><hr>
<table id="test">
    <tr>
        <td>apple</td>
        <td>banana</td>
        <td>red</td>
        <td>green</td>
        <td>ee</td>
        <td>ana</td>
    </tr>
</table>