数据表过滤器忽略带有 html 数据的特殊字符

Question

我在初始化 Datatables 搜索过滤器以忽略特殊字符时遇到了一些问题。我正在使用数据表中的技术 accent neutralise plugin.

它适用于字符串数据，但不适用于表格中的 html 数据。我的测试用例使用带有字母 u 变体的名称（带或不带变音符号）... u, ü, U, Ü 我希望过滤器显示名称“tuv”的结果，无论大小写或 u 上的变音符号如何。

字符串示例：
搜索“tuv”会找到所有案例，无论口音如何……但“name”列排序功能不正确。
http://jsfiddle.net/lbriquet/hdq8bLqn/

HTML 示例：
搜索“tuv”只会找到不带重音的匹配项。但“name”列排序功能正确。 http://jsfiddle.net/lbriquet/cj2s501L/

这里是初始化代码：

jQuery.fn.dataTable.ext.type.search.string = function(data) {
  return !data ?
    '' :
    typeof data === 'string' ?
    data
    .replace(/έ/g, 'ε')
    .replace(/ύ/g, 'υ')
    .replace(/ό/g, 'ο')
    .replace(/ώ/g, 'ω')
    .replace(/ά/g, 'α')
    .replace(/ί/g, 'ι')
    .replace(/ή/g, 'η')
    .replace(/\n/g, ' ')
    .replace(/[áÁ]/g, 'a')
    .replace(/[éÉ]/g, 'e')
    .replace(/[íÍ]/g, 'i')
    .replace(/[óÓ]/g, 'o')
    .replace(/[úÚ]/g, 'u')
    .replace(/[üÜ]/g, 'u')
    .replace(/ê/g, 'e')
    .replace(/î/g, 'i')
    .replace(/ô/g, 'o')
    .replace(/è/g, 'e')
    .replace(/ï/g, 'i')
    .replace(/ã/g, 'a')
    .replace(/õ/g, 'o')
    .replace(/ç/g, 'c')
    .replace(/ì/g, 'i') :
    data;
};

$(document).ready(function() {
  var oTable = $('#example').DataTable();
  // Remove accented character from search input as well
  $('#example_filter input').keyup(function() {
    oTable
      .search(
        jQuery.fn.dataTable.ext.type.search.string(this.value)
      )
      .draw();
  });
});

我认为strip html plugin 可以适应这个问题。我已经可以替换一个特殊字符，但我需要能够替换几个。列排序也可以使用此方法正常工作。

https://jsfiddle.net/lbriquet/ueo8x7up/

(function () {
var _div = document.createElement('div');
jQuery.fn.dataTable.ext.type.search.html = function(data) {
    _div.innerHTML = data;
  return _div.textContent ? 
    _div.textContent.replace(/[üÜ]/g, 'u') :
    _div.innerText.replace(/[üÜ]/g, 'u');
};
})();

$(document).ready(function() {
  var oTable = $('#example').DataTable({
    "columnDefs": [{
      "type": "html",
      "targets": '_all'
    }]
  });
});

谁能帮我解决这个问题？

Answer 1

我找到了解决方案，通过调整 Datatables strip html plugin 来替换 html 中的特殊字符链。

jQuery.fn.dataTable.ext.type.search.html 方法解决了当表格包含 jQuery.fn.dataTable.ext.type 无法解析的 html 数据时所面临的问题Datatables accent neutralise plugin 中使用的 .search.string 方法。

https://jsfiddle.net/lbriquet/xjzuahrt/1/

(function() {
  var _div = document.createElement('div');
  jQuery.fn.dataTable.ext.type.search.html = function(data) {
    _div.innerHTML = data;
    return _div.textContent ?
      _div.textContent
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[ß]/g, 's')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n') :
      _div.innerText
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[ß]/g, 's')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n');
  };
})();

$(document).ready(function() {
  var oTable = $('#example').DataTable({
    "columnDefs": [{
      "type": "html",
      "targets": '_all'
    }]
  });
 // Remove accented character from search input as well
    $('#example_filter input[type=search]').keyup( function () {
        var table = $('#example').DataTable(); 
        table.search(
            jQuery.fn.DataTable.ext.type.search.html(this.value)
        ).draw();
    } );
});