2016-07-25 218 views
2

我有一個函數可以突出顯示AngularJS中字符串中單個單詞的任意數量。我想改變它,以便突出顯示我在數組中輸入的任何單詞,但我不確定如何對RegExp進行單詞輸入。這是當前正則表達式:使用正則表達式匹配字符串列表

$scope.highlight = function(haystack) { 
    return $sce.trustAsHtml(haystack.replace(new RegExp(needle, "gi"), function(match) { 
     return '<span class="highlightWord">' + match + '</span>'; 
    })); 
}; 

目前的「針」變量只是一個簡單的字符串,如「貓」,但我想改變這種狀況,使它包含['cats', 'registered', 'dog']等。

回答

4

使用join()方法通過管道|連接數組元素,該數組元素是正則表達式中的OR運算符。

此外,您可以使用$&獲取匹配的字符串,並在替換字符串中使用它。

$scope.highlight = function (haystack) { 
    return $sce.trustAsHtml(haystack.replace(new RegExp(needle.join('|'), "gi"), '<span class="highlightWord">$&</span>')); 
}; 

var arr = ['cat', 'dog', 'elephant']; 
 
var str = 'Cat fears dog and dog fears elephant'; 
 

 
document.body.innerHTML = str.replace(new RegExp(arr.join('|'), 'gi'), '<span class="highlightWord">$&</span>');
.highlightWord { 
 
    background: yellow; 
 
}

精確匹配的話,使用單詞邊界\b

str.replace(new RegExp('\\b(' + arr.join('|') + ')\\b', 'gi'), '<span class="highlightWord">$1</span>')