我正在使用DataTables plugin，并且已经在表的每一列内搜索了多个搜索框。
然后，我应用了jmHighlight plugin来突出显示搜索结果。
现在，我将向您提供有关如何修改jmHighlight代码以获得以下建议：
不同的跨度和颜色突出显示；
并确保突出显示的单词没有突出显示不会恢复正常。
当我调用jmhighlight()函数时，我使用：
function hlCountry (e) { //"e" is the number of col activated for search
var $keyword = $('#col'+e+'_filter').val(); //this recover word inserted
console.log($keyword); //this is just for test
$("#example tbody #Col"+e+"_tab").jmRemoveHighlight(); //here I call jmRemoveHighlight function restricting search in specify col of table
$("#example tbody #Col"+e+"_tab").jmHighlight($keyword); //here I call jmHighlight function restricting search in specify col of table
}
我试图在
jmRemoveHighlight()（页面中包含的文件）内搜索jmHighlight()和jquery.jmHighlight.min.js。遵循代码：
/*!***************************************************
* jmHighlight
* Version 3.1.0
* Copyright (c) 2014–2016, Julian Motz
*****************************************************/
! function(a, b) {
"use strict";
"function" == typeof define && define.amd ? define(["jquery"], function(a, c) {
return b(a, c)
}) : "object" == typeof exports ? b(require("jquery"), a) : b(a.jQuery, a)
}(this, function(a, b) {
"use strict";
function c(a, c, e) {
return this.options = d.extend({}, {
debug: !1,
log: b.console,
element: "span",
// className: "highlight2",
className: "highlight",
filter: [],
separateWordSearch: !1,
diacritics: !0,
synonyms: {}
}, e), "object" != typeof this.options.log && (this.options.log = {
debug: function() {}
}), this.keyword = "string" == typeof c ? c : "", this.$elements = d(), a instanceof d && a.length > 0 && (this.$elements = a.add(a.find("*")), this.$elements = this.getFilteredElements()), this
}
var d = a;
c.prototype.diacritics = ["aÀÁÂÃÄÅàáâãäåĀāąĄ", "cÇçćĆčČ", "dđĐďĎ", "eÈÉÊËèéêëěĚĒēęĘ", "iÌÍÎÏìíîïĪī", "lłŁ", "nÑñňŇńŃ", "oÒÓÔÕÕÖØòóôõöøŌō", "rřŘ", "sŠšśŚ", "tťŤ", "uÙÚÛÜùúûüůŮŪū", "yŸÿýÝ", "zŽžżŻźŹ"], c.prototype.getFilteredElements = function() {
var a = this.$elements,
b = this.options.filter;
return "object" != typeof b || a instanceof d == !1 || "[object Array]" !== Object.prototype.toString.call(b) ? a : a = a.filter(function() {
for (var a = d(this), c = !1, e = 0, f = b.length; f > e; e++) {
var g = b[e];
a.is(g) && (c = !0)
}
return c ? !1 : !0
})
}, c.prototype.getTextNodes = function(a) {
var b = [];
return a instanceof d == !1 || 0 === a.length ? b : (a.each(function() {
var a = d(this),
c = a.contents().filter(function() {
return 3 === this.nodeType ? !0 : !1
});
c.each(function() {
b.push(this)
})
}), b)
}, c.prototype.getKeywordRegexp = function(a) {
var b = "string" != typeof a ? this.keyword : a;
if ("string" != typeof b || "" === b) return b;
var c = b;
return d.isEmptyObject(this.options.synonyms) || (c = this.getSynonymsRegex(c)), this.options.diacritics && (c = this.getDiacriticRegex(c)), c
}, c.prototype.getSynonymsRegex = function(a) {
var b = a;
return "string" != typeof b ? b : (d.each(this.options.synonyms, function(a, c) {
var d = a,
e = c;
b = b.replace(new RegExp("(" + d + "|" + e + ")", "gmi"), "(" + d + "|" + e + ")")
}), b)
}, c.prototype.getDiacriticRegex = function(a) {
var b = a;
if ("string" != typeof b) return b;
for (var c = b.split(""), d = [], e = 0, f = c.length; f > e; e++)
for (var g = c[e], h = 0, i = this.diacritics.length; i > h; h++) {
var j = this.diacritics[h];
if (-1 !== j.indexOf(g)) {
if (d.indexOf(j) > -1) continue;
b = b.replace(new RegExp("[" + j + "]", "gmi"), "[" + j + "]"), d.push(j)
}
}
return b
}, c.prototype.highlight = function(a) {
var b = "string" != typeof a ? this.keyword : a;
if ("" === b) return !0;
if (0 === this.$elements.length) return this.options.debug && this.options.log.debug("No search context provided"), !1;
this.$elements = this.$elements.filter("*:not([data-jmHighlight])");
var c = this.options.separateWordSearch;
if ("boolean" == typeof c && c) {
var d = b.split(" ");
if (d.length > 1) {
this.options.debug && this.options.log.debug("Highlighting keywords separately");
for (var e = 0, f = d.length; f > e; e++)
if (!this.highlight(d[e])) return !1;
return !0
}
}
this.options.debug && (this.options.log.debug("Highlighting keyword '" + b + "' in elements:"), this.options.log.debug(this.$elements));
for (var g = this.getKeywordRegexp(b), h = new RegExp(g, "mi"), i = this.getTextNodes(this.$elements), j = 0, k = i.length; k > j; j++) {
var l = i[j];
if ("object" == typeof l && "string" == typeof l.nodeValue && "" !== l.nodeValue.trim() && h.test(l.nodeValue) !== !1 && (this.options.debug && this.options.log.debug("Regex: '" + g + "'. Node value: '" + l.nodeValue + "'"), null != l.parentNode)) {
var m = new RegExp("((?![^<]*>)" + g + ")", "gim");
l.parentNode.innerHTML = l.parentNode.innerHTML.replace(m, this.getHighlightTag("$1"))
}
}
return !0
}, c.prototype.getHighlightTag = function(a) {
var b = "<" + this.options.element + " class='" + this.options.className + "' data-jmHighlight='true'>",
c = "</" + this.options.element + ">";
return "string" != typeof a && (a = ""), b + a + c
}, c.prototype.removeHighlight = function() {
if (0 === this.$elements.length) return this.options.debug && this.options.log.debug("No search context provided"), !1;
this.options.debug && ("string" == typeof this.keyword && "" !== this.keyword ? this.options.log.debug("Removing highlighting with keyword: '" + this.keyword + "'") : this.options.log.debug("Removing highlighting"));
var a = new RegExp(this.getKeywordRegexp(), "mi"),
b = this.options.element + "[data-jmHighlight]." + this.options.className,
c = this,
e = this.$elements.filter(b);
return this.options.debug && (this.options.log.debug(b), this.options.log.debug(e)), e.each(function() {
var b = d(this);
return a.test(b.text()) ? void c.appendTextNodes(b, e) : !0
}), !0
}, c.prototype.appendTextNodes = function(a, b) {
if (a instanceof d == !1 || 0 === a.length) return !1;
var c = a.first()[0],
e = c.previousSibling,
f = c.nextSibling,
g = d(e),
h = d(f),
i = !1;
return g.length > 0 && (3 === e.nodeType ? (e.nodeValue = e.nodeValue + a.text(), a.remove()) : b instanceof d && b.length > 0 && b.is(g) ? (g.replaceWith(a.text() + g.text()), a.remove()) : a.replaceWith(a.text()), i = !0), h.length > 0 && (3 === f.nodeType ? 0 === g.length ? (f.nodeValue = a.text() + f.nodeValue, a.remove()) : (f.nodeValue = g.text() + f.nodeValue, g.remove()) : b instanceof d && b.length > 0 && b.is(h) ? 0 === g.length ? (h.replaceWith(h.text() + a.text()), a.remove()) : (h.replaceWith(g.text() + h.text()), g.remove()) : 0 === g.length && a.replaceWith(a.text()), i = !0), i === !1 && a.replaceWith(a.text()), !0
}, d.fn.jmHighlight = function(a, b) {
var e = new c(d(this), a, b);
return e.highlight()
}, d.fn.jmRemoveHighlight = function(a, b) {
var e = new c(d(this), b, a);
return e.removeHighlight()
}
});
这段代码对我来说真的很复杂。我以为我会在代码中找到
jmRemoveHighlight()和jmHighlight()，但是没有。当然，我应该在
<span>和<class name>上工作，但我不知道具体如何。编写的插件开发：
您还可以在上下文中突出显示具有不同类别的多个关键字/短语。只需在下面为每个关键字克隆此代码。在选项对象中传递数组
filter。过滤器数组应包含所有应忽略的选择器。但是我做不到。请告诉我解决该问题的方向吗？
最佳答案
我只想指出，此问题已在此处解决：
https://github.com/julmot/jmHighlight/issues/8
documentation包含一些用法示例，这些示例向您展示如何将jmHighlight与DataTables结合使用以及如何突出显示普通表列。