Javascript 在视图中使用正则表达式

我有一个这样的控制器：

function Ctrl( $scope ){

    $scope.str = " Misty Mountain Hop ";

}

<div ng-controller="Ctrl">

    <p>{{ str }}</p>       <!-- This one is ok -->
    <p>{{ str.split( "Mountain")[0] }}</p>   <!--Even this one is fine too -->
    <p>{{ str.replace( /Mountain/ , "Plain" ) }}</p>  <!-- This one is bad -->

</div>

还有这样一种观点：

function Ctrl( $scope ){

    $scope.str = " Misty Mountain Hop ";

}

<div ng-controller="Ctrl">

    <p>{{ str }}</p>       <!-- This one is ok -->
    <p>{{ str.split( "Mountain")[0] }}</p>   <!--Even this one is fine too -->
    <p>{{ str.replace( /Mountain/ , "Plain" ) }}</p>  <!-- This one is bad -->

</div>

问题是：为什么？

因为您的问题是“为什么？”，答案是插值块中的表达式不是JavaScript表达式，而是JavaScript表达式。它们看起来很像JavaScript（故意的），但Angular使用自己的解析器来解析代码

这样一来，它不仅可以对表达式进行一次求值：它还可以分析依赖关系，这样就可以观察成分并在成分发生变化时进行更新。它还可以计算相对于

$scope

的表达式，以便

{{foo}}

返回

$scope.foo

，而不是一个名为

foo

的全局变量（这反过来会使类似ngRepeat的事情起作用）

当Angular团队实现Angular表达式时，他们显然没有实现正则表达式。这并不奇怪——这种代码应该在控制器中，您可以在那里测试它。

因为您的问题是“为什么？”，答案是插值块中的表达式不是JavaScript表达式，而是JavaScript表达式。它们看起来很像JavaScript（故意的），但Angular使用自己的解析器来解析代码

这样一来，它不仅可以对表达式进行一次求值：它还可以分析依赖关系，这样就可以观察成分并在成分发生变化时进行更新。它还可以计算相对于

$scope

的表达式，以便

{{foo}}

返回

$scope.foo

，而不是一个名为

foo

的全局变量（这反过来会使类似ngRepeat的事情起作用）

---

当Angular团队实现Angular表达式时，他们显然没有实现正则表达式。这并不奇怪——这种代码无论如何都应该在您的控制器中，您可以在那里对其进行测试。

我如何在链接到的小提琴中重现这种代码？单击“Run”不会产生任何错误，它只是打印代码（未替换）。您可以使用

RegExp

构造函数解决此问题：

str.replace（new RegExp（'Mountain'），'Plain'）

。请注意，没有分隔符，您需要在第二个参数中加倍所有反斜杠和修饰符，顺便说一句，为什么要尝试在HTML中执行此逻辑？我认为HTML代表视图（MVC）only@TimPietzcker在控制台中，您可以看到error@MaximShoustin我对我的观点有非常具体的用例，所以我不想把这个功能放在范围内。我如何在你链接到的小提琴中重现它？单击“Run”不会产生任何错误，它只是打印代码（未替换）。您可以使用

RegExp

构造函数解决此问题：

str.replace（new RegExp（'Mountain'），'Plain'）

。请注意，没有分隔符，您需要在第二个参数中加倍所有反斜杠和修饰符，顺便说一句，为什么要尝试在HTML中执行此逻辑？我认为HTML代表视图（MVC）only@TimPietzcker在控制台中，您可以看到error@MaximShoustin我的观点中有非常具体的用例，所以我不想把这个功能放在范围内。太好了，谢谢！它不起作用的原因是

replace（/Mountain/

）中的斜杠，当此语法100%起作用时：

replace（“Mountain”

，所以看起来Angular团队只是忘记了实现它：）太好了，谢谢！它不起作用的原因是

replace中的斜杠（/Mountain/

，当此语法为100%有效时：

replace（“Mountain”

），所以看起来Angular团队只是忘记了实现它：）