Live regulärer Ausdruck Hervorhebung

Question

Ich versuche JavaScript zu verwenden, um Übereinstimmungen mit regulären Ausdrücken in Echtzeit hervorzuheben. Ähnlich wie bei Websites wie 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; 

Ich bin sehr neu in JavaScript. Wie kann ich den gewünschten Effekt erzielen?

Answer 1

Versuchen Sie folgendes:

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; 
} 

Verbrauch:

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