时间戳

首页 > 解决方案 > 在 JS RegExp 中转义特殊字符（在 jQuery .each() 中使用）

javascript - 在 JS RegExp 中转义特殊字符（在 jQuery .each() 中使用）

问题描述

首先，如果标题结构不佳，我必须道歉。我正在努力尝试将所有有效点合并成一个足够简短的标题。如果您能想到更好的选择，请随时编辑。

问题

我已经创建了一个 JavaScript/jQuery 替代支持不佳的<datalist>HTML5 元素，并且大部分情况下我对它的结果感到满意。

一切正常，但我遇到的一个问题是特殊RegExp字符，我不太确定如何转义它们，以免在控制台中出现错误。

我特别想转义的字符是(,)和/. 我知道在 JavaScript 正则表达式中，您应该使用反斜杠来转义这些字符，但是到目前为止我尝试过的尝试中，代码完全停止工作，很明显我没有做对。

我只是想知道如何将转义实现到我当前的代码中？您可以从注释掉的行中看到我尝试过的其他一些方法。

错误

输入有效并正确显示游戏。但是，如果您Grand Theft Auto V从 jsFiddle 中选择一个选项，然后转到括号上的退格键，控制台将抛出此错误：

未捕获的 SyntaxError：无效的正则表达式：/Grand Theft Auto V (PC/: Unterminated group

编码

实时预览：jsFiddle

JavaScript/jQuery：

$('#game-name').keyup( function() {
    var input     = $('#game-search');
    var offset    = input.offset();
    var game_name = $("#game-search").val();

    // List
    function show() {
        $('#game-list').css({
            'display': 'inline-block',
            'left': offset.left,
            'min-width': input.outerWidth(),
            'top': offset.top + input.outerHeight()
        });
    }
    function hide() {
        $('#game-list').css({
            'display': 'none',
            'left': offset.left,
            'min-width': input.outerWidth(),
            'top': offset.top + input.outerHeight()
        });
    }
    if (game_name.length >= 1) {
        show();
    }
    else {
        hide();
    }

    // Filter
    var regexp = new RegExp( game_name, "i" );
    //var regexp = new RegExp(/[A-Za-z0-9_()\/]/, "i");
    // [A-Za-z0-9_()\/]
    $("#game-list ul").children("li").each(function(index) {
        if (game_name.length < 1) {
            $(this).addClass('reset').removeClass('match no-match');
        }
        else {
            //if (/[A-Za-z0-9_()\/]/i.test( $(this).html() )) {
            if (regexp.test( $(this).html() )) {
                $(this).addClass('match').removeClass('no-match reset');
            } else {
                $(this).addClass('no-match').removeClass('match reset');
            }
        }
    });

    // Apply
    $('#game-list ul li').click( function() {
        $('#game-search').val( $(this).attr('value') );
        $('#game-list').css('display', 'none');
    });
});

HTML：

<input type="text" id="game-search">

<div id="game-list">
    <ul>
        <li class="" value="BeamNG.drive" data-series="BeamNG.drive">BeamNG.drive</li>
        <li class="" value="Crash Bandicoot: N. Sane Trilogy" data-series="Crash Bandicoot">Crash Bandicoot: N. Sane Trilogy</li>
        <li class="" value="Grand Theft Auto V (PC)" data-series="Grand Theft Auto">Grand Theft Auto V (PC)</li>
        <li class="" value="Grand Theft Auto V (PS3/PS4)" data-series="Grand Theft Auto">Grand Theft Auto V (PS3/PS4)</li>
        <li class="" value="Grand Theft Auto V (X360/XBO)" data-series="Grand Theft Auto">Grand Theft Auto V (X360/XBO)</li>
        <li class="" value="Project CARS" data-series="Project CARS">Project CARS</li>
        <li class="" value="Project CARS 2" data-series="Project CARS">Project CARS 2</li>
        <li class="" value="Subnautica" data-series="Subnautica">Subnautica</li>
    </ul>
</div>

谢谢你。

标签： javascriptjqueryregexeach

解决方案

您是正确的，您需要转义正则表达式的字符。

尝试使用两个反斜杠来转义正则表达式中的 game_name，如下所示：

var regexp = new RegExp(game_name.replace(/\(|\)/g, "\\$&"), "i");

您需要额外反斜杠的原因是反斜杠在字符串文字和正则表达式中都有特殊含义。第一个是转义字符，只有第二个被占用。

推荐阅读