Javascript、数据表、jmhighlight 和多重搜索

Question

我正在与 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>但我不知 Prop 体如何。

插件开发编写:

You can also highlight multiple keywords/phrases with different classes in the context. Just clone this code below for each keyword. Pass an array filter in the option-object. The filter-array should contain all selectors that should be ignored.

但是我没能做到。请告诉我解决这个问题的方向？

Answer 1

我只是想指出这个问题已经在这里解决: https://github.com/julmot/jmHighlight/issues/8

documentation包含一些使用示例，向您展示如何将 jmHighlight 与 DataTables 结合使用以及如何突出显示普通表列。