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

Question

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

它适用于字符串数据，但不适用于 table 中的 html 数据。我的测试用例使用带有字母 u 变体的名称（有或没有变音符号）... u, ü, U, Ü 我会喜欢过滤器显示名称“tuv”的结果，而不管 u.

上的大写或元音变音

STRING 示例：
搜索 "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 方法解决了当表包含 html 数据时无法使用 [= 解决的问题24=].string中使用的方法Datatables accent neutralise plugin.

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();
    } );
});

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

Datatables filter ignore special characters with html data

filter

datatables

special-characters

html-dataset