ライブ正規表現の強調表示

Question

JavaScriptを使用して正規表現の一致をリアルタイムで強調表示しようとしています。 http://regexr.com/のようなサイトに似ています。

<p id="haystack"> Sample text Sample Text Sample Text Sample Text </p> 

    <form> 
     <input id="needle" onkeyup="highlight('haystack')" onkeydown="highlight('haystack')" type="text" placeholder="Enter Pattern" autofocus> 
    </form> 


function highlight(e){ 

    var pattern = document.getElementById('needle'); 

    var consoleText = document.getElementById('haystack').innerHTML; 

    consoleText = consoleText.replace(pattern.value,"replaced"); 

    document.getElementById('haystack').innerHTML = consoleText; 

非常に新しいです。どのようにして効果を達成できますか？

Answer 1

はこれを試してみてください：

function highlight(container,what,spanClass) { 
    var content = container.innerHTML, 
     pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)','g'), 
     replaceWith = '$1<span ' + (spanClass ? 'class="' + spanClass + '"' : '') + '">$2</span>$3', 
     highlighted = content.replace(pattern,replaceWith); 
    return (container.innerHTML = highlighted) !== content; 
} 

使用法：

highlight(document.getElementById('content'),'hello','highlight');