javascript - 使用 jquery 和/或 Rails JS 突出显示主题标签和@用户名

Question

我在 Rails 和 jquery 上使用 ruby​​。

我正在尝试找到一种方法来注意到评论中的所有@...和#...。然后我想让它们链接到 http://www.example.com/user_profile/ ...或http://www.example.com/search/ ... 分别。

首先，我必须使用 jquery 动态查找注释中的所有 #... 和 @...。

所以，我使用下面的突出显示代码(不是我制作的):

/*

highlight v5

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e68c84a683878f89c885898b" rel="noreferrer noopener nofollow">[email protected]</a>>

*/

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

我可以找到像这样的单词

$('span').highlight('Word');

它有效

但我想突出显示所有开头有 @ 或 # 的单词，如下所示

$("span").highlight('/([#])([a-z])\w+/ig');
$("span").highlight('/([@])([a-z])\w+/ig');

但是上面的代码不起作用。

我愿意使用不同的库，并且愿意接受新的更高级别的建议。

Answer 1

您提到的插件不是为正则表达式构建的。它只能突出显示单个单词，没有任何自定义，仅此而已。

使用mark.js

与 mark.js你可以意识到你想做什么。它是一个文本荧光笔 – 用纯 JavaScript 编写，但也可作为 jQuery 插件 – 用于关键字/搜索词和自定义正则表达式。请查看website有关安装和 API 的详细信息。

如果您想突出显示自定义正则表达式，您需要这样调用它:

$(".context").markRegExp(/RegExp/gi);

使用您的代码进行演示:

JSFIDDLE DEMO

$(document).ready(function() {
  $(".context").markRegExp(/([@]|[#])([a-z])\w+/gmi);
});

mark {
  background: yellow;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/jquery.mark.min.js"></script>
<div class="context">
  Lorem ipsum @dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. #Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

注意:请不要像本示例中那样嵌入 mark.js。 “Rawgit.com”仅用于演示目的!

更新

顺便说一句:如果你想将匹配项转换为链接，你可以这样做:Demo !