Angular 中的正则表达式通配符

Question

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, "\");
}
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, "\");
}

然后在你的 watch 函数中将 * 替换为 .* 并添加行锚点：

$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

Angular 中的正则表达式通配符

Regex Wildcard in Angular

javascript

regex

wildcard

angularjs