使用Javascript RegEx突出顯示短語匹配

我寫了一個正則表達式，通過在短語中添加跨度來突出顯示文本中的匹配短語。該文本可能包含文本中任何地方的和，並且短語將被忽略。以下是我的代碼：使用Javascript RegEx突出顯示短語匹配

var phraseArray = phrase.split(" "); 
var phraseRegex = ""; 
if (phraseArray.length > 1) { 
    var regexSuffix = '+([/\\s]|<\/b>|<b>)+'; 
    for (var i = 0; i < phraseArray.length; i++) { 
     phraseRegex += phraseArray[i] + regexSuffix; 
     if (i == phraseArray.length - 2) { 
      regexSuffix = ""; 
     } 
    } 
} else { 
    phraseRegex = phrase; 
} 
text = text.replace(new RegExp('(' + '([,\\s]|<\/b>|<b>)+' + phraseRegex + '([\\s/,.*]|<\/b>|<b>)+' + ')', 'gi'), '<span class="highlighted">&nbsp;$1&nbsp;</span>');

如果短語Airways Aviation和文字是：

以下是輸出：航空公司航空

<span class="highlighting"> <b>Airways Aviation</b>.</span> Airways Aviation .Airways Aviation. fra 
> Jet Airways. Jet Airways (A range of talented people make it 
> happen every day at<span class="highlighting"> Airways Aviation, .</span>

第二次出現是不突出。這是什麼原因以及如何加強？

來源

2017-03-02 Manoj Suthar

你有什麼問題嗎？它不工作還是你要求改進你的代碼？ – Rikin

它不工作。可能是什麼原因以及如何加強？ –

@ManojSuthar檢查你的問題答案並不清楚。那是你要的嗎？ –

[根據你的問題編輯編輯]
[根據註釋編輯]

您必須使用g標誌全局匹配。

得到word要匹配
創建一個新的RegExp與添加 "()?"+word+"()?" //可能或maynot包含和在開始和結束，g對比賽所有
替換跨度上述正則表達式
$ &添加匹配

var str="<b>Airways Aviation</b>. Airways<b> Aviation</b> .Airways Aviation. fra Jet Airways. Jet Airways (India A range of talented people make ithappen every day at Airways Aviation, ." 
 
    
 
function test(word){ 
 
    word=word.split(" ").join("(<b>|</b>|\\s)*"); 
 
    var re=new RegExp("(<b>)?"+word+"(</b>)?",'g'); 
 
    console.log(str.replace(re,"<span class=\"highlighting\">$&</span>")); 
 
} 
 
test("Airways Aviation");

工作模式

function test(word){ 
 
    word=word.split(" ").join("(<b>|</b>|\\s)*"); 
 
    var re=new RegExp("(<b>)?"+word+"(</b>)?",'g'); 
 
    var str=document.getElementById('div'); 
 
    str.innerHTML=str.innerHTML.replace(re,"<span class=\"highlighting\">$&</span>"); 
 
}

span.highlighting{ 
 
    background-color:#ccc; 
 
    color:#fff; 
 
}

<body> 
 
<div id="div"><b>Airways Aviation</b>. Airways<b> Aviation</b> .Airways Aviation. fra Jet Airways. Jet Airways (India A range of talented people make ithappen every day at <b>Airways</b> Aviation, .</div> 
 
<button onclick="test('Airways Aviation');">Change</button> 
 
</body>

來源

2017-03-02 15:09:35

感謝您的回答。但是「Airways Aviation」失敗。粗體標籤可以出現在短語的任何地方。該短語的任何單詞或短語可以在粗體內 –

您是否試過[mark.js]（https://markjs.io/）？ – dude

立即檢查@ManojSuthar編輯。 –

回答

相關問題