如何修改Datatables图片alt排序插件以适配无图片行？

问题场景 #

Datatables有一款按图片alt标签排序的插件，但仅在所有条目都包含带alt标签的图片时能正常工作。当表格中存在无图片的行时，插件会失效。示例表格HTML如下：

<tr class="tablebody tablebodyhover">
    <td>Item1 description</td>
    <td><img src='icon-tick.svg' alt='tick' width='16' height='16'/></td>
    <td class="textcenter"></td>
</tr>
<tr class="tablebody tablebodyhover">
    <td>Item2 description</td>
    <td></td>
</tr>
<tr class="tablebody tablebodyhover">
    <td>Item3 description</td>
    <td></td>
</tr>
<tr class="tablebody tablebodyhover">
    <td>Item4 description</td>
    <td><img src='icon-tick.svg' alt='tick' width='16' height='16'/></td>
</tr>

原插件问题代码 #

原插件依赖正则匹配alt字符串，但未处理匹配失败的情况，当单元格无图片时match()返回null，直接访问[1]会导致报错：

// sort by alt of image extension
$.extend($.fn.dataTableExt.oSort, {
    "alt-string-pre": function ( a ) {
        return a.match(/alt="(.*?)"/)[1].toLowerCase();
    },

    "alt-string-asc": function( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "alt-string-desc": function(a,b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

修改后的可行方案 #

通过添加**可选链操作符?.和空值合并运算符??**处理匹配失败的情况，当无alt标签时返回空字符串，保证排序逻辑正常执行：

$.extend($.fn.dataTableExt.oSort, {
    "alt-string-pre": function ( a ) {
        return a.match(/alt="(.*?)"/)?.[1]?.toLowerCase() ?? '';
    },

    "alt-string-asc": function( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "alt-string-desc": function(a,b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

修改说明 #

• a.match(/alt="(.*?)"/)?.[1]：当正则匹配失败返回null时，?.会终止后续访问，避免报错；匹配成功时则提取alt标签内容
• ?.toLowerCase()：确保提取到的alt内容转为小写，保证排序的一致性
• ?? ''：当前面的表达式返回undefined或null时，返回空字符串，无图片的行将以空字符串参与排序，不会干扰正常的alt标签排序逻辑

内容的提问来源于stack exchange，提问作者Spencer