數據表過濾器忽略帶有 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')

該特定字符不會在搜索欄結果中被中和。 誰能解釋為什么會這樣嗎？ 我覺得我可能忽略了一些非常基本的內容。