javascript - Angular 中的正则表达式通配符

Question

http://jsfiddle.net/f4Zkm/213/

HTML

<div ng-app>
    <div ng-controller="MyController">
        <input type="search" ng-model="search" placeholder="Search...">
        <ul>
            <li ng-repeat="name in names | filter:filterBySearch">
                {{ name }}
            </li>
        </ul>
    </div>
</div>

app.js

function escapeRegExp(string){
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function MyController($scope) {
    $scope.names = [
    'Lolita Dipietro',
    'Annice Guernsey',
    'Gerri Rall',
    'Ginette Pinales',
    'Lon Rondon',
    'Jennine Marcos',
    'Roxann Hooser',
    'Brendon Loth',
    'Ilda Bogdan',
    'Jani Fan',
    'Grace Soller',
    'Everette Costantino',
    'Andy Hume',
    'Omar Davie',
    'Jerrica Hillery',
    'Charline Cogar',
    'Melda Diorio',
    'Rita Abbott',
    'Setsuko Minger',
    'Aretha Paige'];

    $scope.search = '';
    var regex;
    $scope.$watch('search', function (value) {
        regex = new RegExp('\\b' + escapeRegExp(value), 'i');
    });

    $scope.filterBySearch = function(name) {
        if (!$scope.search) return true;
        return regex.test(name);
    };
}

从上面的示例中，我一直尝试使用特殊字符“*”创建通配符正则表达式搜索，但我无法循环遍历数组。

当前输出:如果输入是di，则显示所有相关匹配。

必需:我想要得到的是，如果输入是 di*/*(任何输入)，它应该根据给定输入显示所有匹配项。

Answer 1

您的方法存在一些问题。首先，您在转义例程中对 * 进行转义，因此客户端无法使用它。

其次，您没有锚定您的线路，因此匹配可以发生在任何地方。

要修复此问题，请从转义函数中删除星号:

function escapeRegExp(string){
    return string.replace(/([.+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

然后在您的 watch 功能中将 * 替换为 .* 并添加行 anchor :

$scope.$watch('search', function (value) {
        var escaped = escapeRegExp(value);
        var formatted = escaped.replace('*', '.*')

        if(formatted.indexOf('*') === -1){
            formatted = '.*' + formatted + '.*'
        }

        regex = new RegExp('^' + formatted + '$', 'im');
    });

Here is a fiddle