javascript - 尝试使用 JavaScript 突出显示子字符串

Question

我想编写一个 JS 函数，它将在一个元素(td)中查找一个子字符串，并突出显示它。它只需要对元素中第一次出现的子字符串起作用。我只是想在我的博客上突出显示一些关键字。

这是我迄今为止尝试过的 -

JavaScript

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

请注意，对象['highlight'] 是我可以在 Ruby on Rails 代码中访问的对象。

HTML

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

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

任何人都可以看到我在这里做错了什么吗？

谢谢

Answer 1

看看mark.js 。它可以突出显示关键字/术语或自定义正则表达式。它也可以作为 jQuery 插件使用。

演示:JSFIDDLE

var context = document.querySelector(".test");
var instance = new Mark(context);
// "text" is '<% object['highlight'].first %>'
instance.mark("text");

mark{
  background: yellow;
  color: black;
}

<div>
  <table>
    <thead>
      <tr>
        <th>...</th>  
      </tr>       
    </thead>
    <tbody>
      <tr>
        <td class="test">This element contains text to be highlighted</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>