2017-12-20 2 views
1

필터 할 때 img 탭을 건너 뛰고 싶습니다. 이미 테스트했지만 괜찮지는 않습니다. 여전히 img 또는 src 값을 필터링합니다. 그래서 pls 도움이됩니다.AngularJS 필터를 사용하여 문자열의 이미지 탭을 건너 뛸 수 있습니까?

여기에 내 코드

필터

app.filter('highlight', function ($sce) { 
    return function (text, phrase) { 
     if (phrase) { 
      var matches = String(text).match(/<img.*?src="([^"]*)"[^>]*>(?:<\/img>)?/m); 
      var img_src = (matches && matches.length && matches[0]) ? matches[0] : ''; 
      text = text.replace(img_src, "#"); 

      text = text.replace(new RegExp('(' + phrase + ')', 'ig'), 
       '<span class="highlighted">$1</span>'); 
      text = text.replace("#", img_src); 
     } 
     return $sce.trustAsHtml(text) 
    } 
}) 

컨트롤러

$scope.imgList = []; 
     imgList.push('<img src="image1.jpg">'); 
     imgList.push('<img src="image2.jpg">'); 
     imgList.push('Using <img src="image1.jpg">“this” instead of “scope” <img src="image3.jpg"/> <p>Post Description <img src="image4.jpg"/></p>'); 

HTML

<input ng-model="searchText" type="text"> 

<ul> 
    <li ng-repeat="img in imgList"> 
     <p ng-bind-html="img | highlight:searchText"></p> 
    </li> 
</ul> 

답변

0

나는 대답을 얻었다입니다. 필터는 다음과 같아야합니다.

app.filter('highlight', function ($sce) { 
    return function (text, phrase) { 
     if (text && phrase) { 
      var matches = String(text).match(/<img.*?src="([^"]*)"[^>]*>(?:<\/img>)?/g); 
      if(matches && matches.length != 0){ 
       for(var i = 0; i < matches.length; i++) { 
        text = text.replace(matches[i], "#_#" + i); 
       } 
      } 

      text = text.replace(new RegExp('(' + phrase + ')', 'ig'), '<span class="highlighted">$1</span>'); 
      if(matches && matches.length != 0){ 
       for(var i = 0; i < matches.length; i++) { 
        text = text.replace("#_#" + i, matches[i]); 
       } 
      } 
     } 

     return $sce.trustAsHtml(text) 
    } 
})