带有双引号的正则表达式的ng-pattern无法正确转义

时间:2015-12-07 19:29:26

标签: javascript angularjs regex ng-pattern angularjs-ng-pattern

我对^ [^ \ ./:* \?\“<> \ |] {1} [^ \ /:* \?\”<>的正则表达式进行了ng-pattern验证\ |] {0,254} $基本上测试filepath和teh限制中的无效字符。但是当我将ng-pattern指定为

 ng-pattern = "^[^\\\./:\*\?\"<>\|]{1}[^\\/:\*\?\"<>\|]{0,254}$"

,ng-pattern以不正确的方式显示正则表达式。正确实现这一目标的任何帮助

3 个答案:

答案 0 :(得分:3)

首先,你的正则表达式包含太多的转义符号,而你只需要转义"这里和\\

然后,要匹配"内部ng-pattern属性,您可以将其定义为\x22&quot;

var app = angular.module("app", []);
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<form name="form">
  <p>Enter text to validate:</p>
  <input type="text" ng-model="name" name="name" ng-pattern="/^[^\\\\./:*?&quot;<>|][^\\\\/:*?\x22<>|]{0,254}$/" ng-trim="false" />
  <div ng-show="form.name.$error.pattern">Text doesn't match with ng-pattern!</div>
</form>
</body>
</html>

您也可以通过使用常规字符串文字在控制器中定义正则表达式来解决问题,您可以使用'.."..'"..\"...",然后使用变量名称{{...}}属性中的ng-pattern内。请注意,要匹配文字\,您需要在正则表达式模式中使用4个反斜杠。

var app = angular.module("app",[]);

app.controller("FormCtrl", function($scope) {
  $scope.regex = "/^[^\\\\./:*?\"<>|][^\\\\/:*?\"<>|]{0,254}$/";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <form name="theForm" ng-controller="FormCtrl" novalidate>
        <input type="text" name="filename" placholder="filename" ng-model="filename" ng-pattern="{{regex}}" required />
        <div class="error"
                     ng-show="(theForm.filename.$dirty || attempted) && theForm.filename.$invalid">
                  <small class="error text-danger"
                         ng-show="theForm.filename.$error.required">
                    Please enter a file name.
                  </small>
                  <small class="error text-danger"
                         ng-show="theForm.filename.$error.pattern">
                    Please enter a valid file name.
                  </small>
                </div>
    </form>
</div>

答案 1 :(得分:2)

我试图在ng-pattern中排除'和',这类似于上面的问题。我找到了一种方法来直接嵌入'或'而不必使用范围变量:

<input type="text" ng-pattern="/^[^&#34&#39]+$/" />

答案 2 :(得分:1)

您可以使用\&quot;来逃避"