如何突出RegEx與jQuery的匹配？

以代碼爲基礎，是否可以在不使用額外插件的情況下突出顯示任何匹配項目？如何突出RegEx與jQuery的匹配？

我想將style="backgorund: green;"添加到發現物品的div中，以便我可以直接看到它們。

到目前爲止我嘗試過的東西都沒有工作，所以我希望從我的大腦外面一些新鮮的想法能夠做到這一點。

function finder(items){ 
    var needed = [ 
     /* items */ 
    ]; 
    var re = new RegExp(needed.join("|"), "i"); 
    return(items.match(re) != null); 
} 

var found = finder(document.body.innerHTML); 
var output = found ? "found" : "not found"; 

if(output == 'found') { 
    //highlight found array item 
}

來源

2012-12-21 spiel

相關：我最近做了類似的事情：https://github.com/Ralt/regexfiddle –

你想添加樣式到文本的div，或者創建一個圍繞文本發現的範圍只突出顯示？ –

@FlorianMargaine我想將樣式添加到包含查找的元素，而不是在其周圍創建新元素。現在看看現在給出的答案，看看是否有我可以使用的東西。 – spiel

-1

我在我的代碼有點改變，解決它像這樣：

function finder(items){ 
    var needed = [ 
     /* items */ 
    ]; 
    var reg = new RegExp(needed.join("|"), "i"); 
    var found = (textToCheck.match(reg) != null); 
    var foundItem = textToCheck.match(reg); 
    return [found,foundItem]; 
} 

var found = finder(document.body.innerHTML)[0]; 
var foundItem = finder(document.body.innerHTML)[1]; 

if(found === true) { 
    $('div:contains('+foundItem+')').css("background", "greenyellow"); 
}

來源

2012-12-21 23:44:16 spiel

爲什麼要重新發明輪子？有這個準備好的解決方案。例如，嘗試this plugin。這是插件的source code。這實際上是幾行代碼，所以如果你真的想編寫自己的突出顯示引擎，你可以分析它看看突出顯示是如何執行的。

來源

2012-12-21 12:51:34 mingos

我已經看過很多插件了，而且沒有我需要的，這就是爲什麼我要求直接編碼。看看你鏈接的來源，不是我一直在尋找的。非常感謝您盡力幫助！ – spiel

你可以嘗試用一些替代（）

for (var i = 0; i < needed.length; i++) { 
    var word = needed[i]; 
    document.body.innerHTML = document.body.innerHTML.replace(word, '<span style="background: #00ff00">' + word + '</span>'); 
}

這裏試試：http://jsfiddle.net/4kjuw/

來源

2012-12-21 12:53:11

當我打開你的小提琴時，我會收到各種奇怪的警報。另外，替換並不完全是我想到的，因爲我想對父元素進行樣式設置，而不是在文本週圍添加一個範圍。非常感謝您盡力幫助。 – spiel

使用innerHTML是邪惡的，因爲它會一次又一次地取代事件並觸發DOM的生成。我建議使用現有的插件，因爲你會遇到更多的陷阱。查看mark.js以突出顯示自定義正則表達式。

來源

2016-05-21 14:18:28 dude

如何突出RegEx與jQuery的匹配？

回答

相關問題