javascript - 为什么正则表达式使用 Angular $sce 在 "t"中查找 "Georgia"？

Question

我不完全确定我的问题是否是由于 Angular 错误或我不知道的 RegEx 的其他原因引起的，但我不明白为什么以下代码在输入后返回“Georgia”记录搜索输入中的“t”。

var app = angular.module('MyApp', [])
  .controller("FilteredList", function($scope, $sce) {

    $scope.highlight = function(text, search) {

      if (!search) {
        return $sce.trustAsHtml(text);
      }
      return $sce.trustAsHtml(text.replace(new RegExp(search, 'gi'), '<span class="highlighted">$&</span>'));

    };


    $scope.statesWithFlags = [{
      'name': 'Alabama',
      'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'
    }, {
      'name': 'Alaska',
      'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'
    }, {
      'name': 'Arizona',
      'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'
    }, {
      'name': 'Arkansas',
      'flag': '9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'
    }, {
      'name': 'California',
      'flag': '0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'
    }, {
      'name': 'Colorado',
      'flag': '4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'
    }, {
      'name': 'Connecticut',
      'flag': '9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'
    }, {
      'name': 'Delaware',
      'flag': 'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'
    }, {
      'name': 'Florida',
      'flag': 'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'
    }, {
      'name': 'Georgia',
      'flag': '5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'
    }, {
      'name': 'Hawaii',
      'flag': 'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'
    }, {
      'name': 'Idaho',
      'flag': 'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'
    }, {
      'name': 'Illinois',
      'flag': '0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'
    }, {
      'name': 'Indiana',
      'flag': 'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'
    }, {
      'name': 'Iowa',
      'flag': 'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'
    }, {
      'name': 'Kansas',
      'flag': 'd/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'
    }, {
      'name': 'Kentucky',
      'flag': '8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'
    }, {
      'name': 'Louisiana',
      'flag': 'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'
    }, {
      'name': 'Maine',
      'flag': '3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'
    }, {
      'name': 'Maryland',
      'flag': 'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'
    }, {
      'name': 'Massachusetts',
      'flag': 'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'
    }, {
      'name': 'Michigan',
      'flag': 'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'
    }, {
      'name': 'Minnesota',
      'flag': 'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'
    }, {
      'name': 'Mississippi',
      'flag': '4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'
    }, {
      'name': 'Missouri',
      'flag': '5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'
    }, {
      'name': 'Montana',
      'flag': 'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'
    }, {
      'name': 'Nebraska',
      'flag': '4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'
    }, {
      'name': 'Nevada',
      'flag': 'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'
    }, {
      'name': 'New Hampshire',
      'flag': '2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'
    }, {
      'name': 'New Jersey',
      'flag': '9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'
    }, {
      'name': 'New Mexico',
      'flag': 'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'
    }, {
      'name': 'New York',
      'flag': '1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'
    }, {
      'name': 'North Carolina',
      'flag': 'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'
    }, {
      'name': 'North Dakota',
      'flag': 'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'
    }, {
      'name': 'Ohio',
      'flag': '4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'
    }, {
      'name': 'Oklahoma',
      'flag': '6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'
    }, {
      'name': 'Oregon',
      'flag': 'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'
    }, {
      'name': 'Pennsylvania',
      'flag': 'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'
    }, {
      'name': 'Rhode Island',
      'flag': 'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'
    }, {
      'name': 'South Carolina',
      'flag': '6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'
    }, {
      'name': 'South Dakota',
      'flag': '1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'
    }, {
      'name': 'Tennessee',
      'flag': '9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'
    }, {
      'name': 'Texas',
      'flag': 'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'
    }, {
      'name': 'Utah',
      'flag': 'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'
    }, {
      'name': 'Vermont',
      'flag': '4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'
    }, {
      'name': 'Virginia',
      'flag': '4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'
    }, {
      'name': 'Washington',
      'flag': '5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'
    }, {
      'name': 'West Virginia',
      'flag': '2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'
    }, {
      'name': 'Wisconsin',
      'flag': '2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'
    }, {
      'name': 'Wyoming',
      'flag': 'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'
    }];

  });

* {
  font-family: sans-serif;
}
.filtered-list {
  padding: 10px;
  width: 500px;
}
.filtered-list .search-input {
  width: 100%;
}
.filtered-list .scroll-container {
  height: 300px;
  width: 100%;
  border: 1px solid #ddd;
  overflow: auto;
}
.filtered-list input[type=checkbox] {
  margin: 4px 6px 2px 0;
}
.filtered-list ul {
  list-style-type: none;
  margin: 0;
}
.filtered-list li {
  margin: 0;
  padding: 2px 0 2px 12px;
}
.filtered-list li:hover {
  background: #eee;
}
.filtered-list .highlighted {
  background: #ee6;
}
.flag-icon {
  width: 23px;
  height: 15px;
}
.flag-name {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp">
  <div class="filtered-list" ng-controller="FilteredList">
    <input class="search-input" ng-model="query" ng-model-options="{ debounce: 250 }" type="text" placeholder="Search..." autofocus></input>

    <div class="scroll-container">
      <ul>
        <li class="ng-scope" ng-repeat="v in statesWithFlags | filter:query | orderBy: 'name' ">
          <label>
            <input type="checkbox" class="xui-checkbox" ng-model="filter.IsActive">
            <img class="flag-icon" ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{v.flag}}" />&nbsp;&nbsp;
            <div class="flag-name ng-binding" ng-bind-html="highlight(v.name, query)">{{v.val}}</div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</body>

<小时/>

applied the accepted solution here and it works great thanks .

Answer 1

这是因为您正在过滤整个对象(名称和旗帜)，并且乔治亚州的旗帜网址中有一个“t”。使用 filter:{name:query} 仅根据名称进行过滤。

编辑:正如 @daniel-a-white 指出的，这与 $sce 无关，突出显示效果很好。这个问题是你的过滤器，这可以解决。