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插件使用。

DEMO：JSFIDDLE

＆＃13;

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

＆＃13;

mark{
  background: yellow;
  color: black;
}

＆＃13;

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

＆＃13;

Answer 2

您必须将文本重新附加到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>

Javascript部分

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

编辑：

尽管这可能会回答OP的问题，但不推荐。最好使用this或this

等任何库

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

2 个答案: