优化正则表达式以过滤数千个 HTML 选择选项

Question

背景

我为 HTML select 元素开发了一个基于 jQuery 的 shuttle widget，因为我找不到一个经过最低限度编码并提供了一个正则表达式过滤器来补偿 diacritics。

问题

当向select 添加几千个条目时，正则表达式过滤器会变慢到爬行。可以看到问题如下：

1. 浏览至：http://jsfiddle.net/U8Xre/2/
2. 单击结果面板中的输入字段。
3. 键入任何正则表达式（例如，^a.*ai）。

代码

我相信罪魁祸首潜伏在这里：

var options = $src.empty().scrollTop( 0 ).data( "options" );
var search = $.trim( $input.val() );
var regex = new RegExp( search, 'gi' );
var len = options.length;
var $html = $(document.createElement( 'option' ));
for( var i = 0; i < len; i++ ) {
  var o = options[ i ];
  if( o.text.dediacritics().match( regex ) !== null ) {
    $src.append( $html.clone().text( o.text ).val( o.value ) );
  }
}
$src.css( 'width', $input.width() + 4 );

其中$src 是源$('#select') 和String.prototype.dediacritics 在小提琴中定义。上面的代码针对每个按键运行。还有一个相关的sn-p：

// Create a copy of the source options to use when matching the regex.
var $options = [];
$src.find( "option" ).each( function() {
  $options.push( { value: $(this).val(), text: $(this).text() } );
});
$src.data( "options", $options );

这会复制源列表中的选项，但只运行一次。 （这会导致在穿梭选项时出现重复错误，但将上述代码添加到input 事件处理程序会进一步减慢过滤器。）

问题

如何使代码几乎实时地对多达 5,000 个单词的列表执行正则表达式过滤？

谢谢！

Answer 1

我猜想更难的工作是重复调用dediacritics()（带有许多正则表达式替换）而不是进行搜索（尽管我没有进行任何分析）。因此，您应该缓存这些去变音符号的字符串并仅通过它们进行搜索。顺便说一句，test 通常比 match 快。

此外，您应该尽可能避免 DOM 操作 - 在清空和重新附加整个选项列表 onkeypress 时，您有很多操作。

// once:
var options = [],
    src = $src[0]; // or whatever to get the DOM element
$.each( src.options, function() {
    options.push( { el: this, text: $(this).text().dediacritics(), hidden:false } );
});
// you might put it on the element via .data(), but need not

// onkeypress:
var regex = new RegExp( $.trim($input.val()), 'i' );
var curEl = src.firstChild;
for (var i=0; i<options.length; i++) {
    var option = options[i];
    if (regex.test( option.text )) {
        if (option.hidden)
            src.insertBefore(option.el, curEl);
        curEl = option.el.nextSibling;
        option.hidden = false;
    } else {
        if (!option.hidden) {
            curEl = option.el.nextSibling;
            src.removeChild(option.el);
        }
        option.hidden = true;
    }
}

Demo：这非常快（“实时”），但是当调用dediacritics() 5000 次时，您可以感觉到构造options 数组所需的时间。

Answer 2

我建议你

• 创建一个多行字符串，其中包含所有选项名称的列表，每个选项名称位于单独的一行中
• 对这个多行字符串应用正则表达式，通过删除不匹配的行来过滤其内容
• 使用匹配行作为选择元素的选项更新 html

Answer 3

一个小评论，如果您没有使用正则表达式匹配的结果，那么您应该使用正则表达式测试：

  if( o.text.dediacritics().match( regex ) !== null ) {

使用测试：

  if( regex.test(o.text.dediacritics()) ) {