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

Question

我在初始化 Datatables 搜索过滤器以忽略特殊字符时遇到了一些麻烦。 我正在使用数据表重音中和插件中的技术。

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

STRING 示例：
搜索“tuv”可找到所有情况，无论重音如何...但“名称”列排序功能不正常。
http://jsfiddle.net/lbriquet/hdq8bLqn/

HTML 示例：
搜索“tuv”只能找到不带重音的匹配项……但“名称”列排序功能正常。 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 插件来解决这个问题。 我已经用它来替换一个特殊字符，但我需要能够替换几个。 列排序也可以使用此方法正常工作。

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 插件来替换html 中的特殊字符链。

jQuery.fn.dataTable.ext.type.search。 html方法解决了当表格包含无法使用 jQuery.fn.dataTable.ext.type.search 解决的 html 数据时所面临的问题。 数据表重音中和插件中使用的字符串方法。

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

Answer 2

Ibriquet的解决方案对我有用，但是由于某些原因，当我尝试在“ o”部分添加“ǫǪ”时，它显示为

 .replace(/[óÓòÒôÔöÖœŒǫǪ]/g, 'o')

该特定字符不会在搜索栏结果中被中和。 谁能解释为什么会这样吗？ 我觉得我可能忽略了一些非常基本的内容。