使用mark.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:jb@eaio.com>

*/

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插件 - 用于关键字/搜索术语和自定义正则表达式。有关安装和API的详细信息，请查看website。

如果要突出显示自定义正则表达式，则需要将其称为：

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

使用您的代码进行演示：

JSFIDDLE DEMO

＆＃13;

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

＆＃13;

mark {
  background: yellow;
}

＆＃13;

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

＆＃13;

注意：请不要像本例中那样嵌入mark.js。＆＃34; Rawgit.com＆＃34;仅用于演示目的！

更新

顺便说一下：如果你想将匹配转换为链接，你可以这样做：Demo！

使用jquery和/或rails JS突出显示hashtags和@usernames

1 个答案:

使用mark.js

更新