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

Question

I'm having some trouble initializing a Datatables search filter to ignore special characters. I'm using the technique from the datatables accent neutralise plugin.

It works properly with string data, but not with html data in the table. My test case uses names with variations of the letter u (with or without an umlaut)... u, ü, U, Ü I would like for the filter to show results for the name " tuv ", regardless of capitalization or the umlaut on u.

STRING example:
search for "tuv" finds all cases, regardless of accents... but "name" column sort is not functioning correctly.
http://jsfiddle.net/lbriquet/hdq8bLqn/

HTML example:
search for "tuv" finds only unaccented matches.. but "name" column sort functions correctly. http://jsfiddle.net/lbriquet/cj2s501L/

Here is the initialization code:

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

I think the strip html plugin could be adapted to address this problem. I've got it working to replace one special character, but I need to be able to replace several. The column sorting also works correctly with this method.

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'
    }]
  });
});

Can anyone give me a hand with this?

Answer 1

I found the solution, by adapting the Datatables strip html plugin to replace a chain of special characters in the html.

The jQuery.fn.dataTable.ext.type.search. html method resolved the problems faced when tables contain html data that could not be resolved with the jQuery.fn.dataTable.ext.type.search. string method used in the 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();
    } );
});

Answer 2

Ibriquet's solution worked for me, but for some reason when I try to add 'ǫǪ' to the 'o' section, such that it reads

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

that particular character doesn't get neutralised in searchbar results. Can anyone please explain why this might be the case? I feel like I may be overlooking something very basic here.