如何在AngularJS中提取短语的最后一个单词

方法一：自定义过滤器（推荐，复用性高） #

自定义一个AngularJS过滤器，专门处理字符串提取最后一个单词的逻辑，后续可在视图或控制器中重复使用。

angular.module('myApp', [])
.filter('lastWord', function() {
  return function(input) {
    if (!angular.isString(input)) return '';
    // 处理可能的首尾空格，按空格分割后取最后一个非空元素
    const words = input.trim().split(/\s+/);
    return words.length > 0 ? words[words.length - 1] : '';
  };
});

视图中使用示例（假设phrases是存储原始短语的数组）：

<div ng-app="myApp" ng-controller="PhraseController">
  <ul>
    <li ng-repeat="phrase in phrases">{{ phrase | lastWord }}</li>
  </ul>
</div>

<script>
angular.module('myApp')
.controller('PhraseController', function($scope) {
  $scope.phrases = [
    "Shiloh Match Jolie",
    "Zahara Marley Novel",
    "Pax Dix Bat",
    "Maddox Chivan Jcalie"
  ];
});
</script>

方法二：控制器内预处理数据 #

如果不需要复用提取逻辑，可直接在控制器中处理原始数组，生成仅包含最后一个单词的结果数组：

angular.module('myApp', [])
.controller('PhraseController', function($scope) {
  const originalPhrases = [
    "Shiloh Match Jolie",
    "Zahara Marley Novel",
    "Pax Dix Bat",
    "Maddox Chivan Jcalie"
  ];
  
  $scope.lastWords = originalPhrases.map(phrase => {
    const words = phrase.trim().split(/\s+/);
    return words.length > 0 ? words[words.length - 1] : '';
  });
});

视图直接绑定处理后的数组：

<div ng-app="myApp" ng-controller="PhraseController">
  <ul>
    <li ng-repeat="word in lastWords">{{ word }}</li>
  </ul>
</div>

方法三：视图表达式直接处理（简单场景） #

若仅需单次使用，可直接在ng-repeat的表达式中完成处理：

<div ng-app="myApp" ng-controller="PhraseController">
  <ul>
    <li ng-repeat="phrase in phrases">
      {{ phrase.trim().split(/\s+/).pop() }}
    </li>
  </ul>
</div>

<script>
angular.module('myApp')
.controller('PhraseController', function($scope) {
  $scope.phrases = [
    "Shiloh Match Jolie",
    "Zahara Marley Novel",
    "Pax Dix Bat",
    "Maddox Chivan Jcalie"
  ];
});
</script>

以上三种方案均能得到目标结果：Jolie、Novel、Bat、Jcalie，可根据实际场景选择合适的实现方式。

内容的提问来源于stack exchange，提问作者Van Pham