试图用JavaScript突出显示子字符串

我想写一个JS函数，它将在一个元素（td）中找到一个子字符串，并突出显示它。它只需要为元素中第一次出现的子字符串工作。我只是想在我的博客上突出一些关键词

以下是我迄今为止所尝试的-

JavaScript

function highlight(s, search) {
    return s.replace(new RegExp(
        search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'
    ), '<b>$&</b>');
}

功能突出显示，搜索{
返回s.replace（新的RegExp(
search.replace（/[-\/\^$*+？。（）|[\]{}]/g，'\\$&'），'gi'
), '$&');
}

注意，对象['highlight']是我在RubyonRails代码中可以访问的对象

HTML

...  
此元素包含要高亮显示的文本
突出显示（$（'test'）.html（），）

当我尝试运行此代码时，没有突出显示任何内容

有人能看出我在这里做错了什么吗

---

谢谢

您必须将文本追加回td

<table>
  <thead>
    <tr>
      <th>...</th>  
    </tr>       
  </thead>
  <tbody>
    <tr>
      <td class="test">
        This element contains text to be highlighted
        <script>highlight('.test', '<%= object['highlight'].first %>')</script>
      </td>
    </tr>
  </tbody>
</table>

...  
此元素包含要高亮显示的文本
突出显示（'.test'，''）

Javascript部分

<script>
  function highlight(s, search) {
    text = $(s).html();
    modifiedText = s.replace(new RegExp(
        search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'
    ), '<b>$&</b>');
    $(s).html(modifiedText);
}
</script>

功能突出显示（s、搜索）{
text=$（s.html（）；
modifiedText=s.replace（新的RegExp(
search.replace（/[-\/\^$*+？。（）|[\]{}]/g，'\\$&'），'gi'
), '$&');
$（s）.html（modifiedText）；
}

编辑：

尽管这可能会回答OP的问题，但不建议这样做。最好使用像或之类的库，看看。它可以突出显示关键字/术语或自定义正则表达式。它也可以作为jQuery插件提供

演示：

var context=document.querySelector（“.test”）；
var实例=新标记（上下文）；
//“文本”是“
例如：标记（“文本”）
标记{
背景：黄色；
颜色：黑色；
}

...  
此元素包含要高亮显示的文本
非常感谢您的评论。它现在可以找到文本，但替换为“test”！有什么想法吗？好的。html中的erb部分有一些错误。我已经更新了答案。（我猜您的javascript替换部分是正确的。如果您不确定，您可以参考此小提琴-注意使用
.html（）
（jQuery）或
innerHTML
（VanillaJS）将删除元素中的事件并一次又一次地生成DOM。这是邪恶的，你应该避免这样做。是的，这不是正确的方法。我还建议使用julmot的答案。你忘了提到你正在使用jQuery。
<script>
  function highlight(s, search) {
    text = $(s).html();
    modifiedText = s.replace(new RegExp(
        search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'
    ), '<b>$&</b>');
    $(s).html(modifiedText);
}
</script>