JSFiddle - React, Tailwind, and code Playground

by Dzejms

HTML

<div id="show_container">
    <div id="show1" class="show_content" style="display: block; ">
        <div id="searchlist">
            
            
            <br>
            
            <div class="table hundred">
                <div class="row">
                    <div class="cell pr5 br">
                        
                        <h4><a href="/value/2011/03/19/Here-s-a-Porsche-Story-Copy.html">Porsche Porsche Porsche</a></h4>
                        <p>This is a story about Porsche. It should show up in my search results about Porsche.</p> | <a href="/value/2011/03/19/Here-s-a-Porsche-Story-Copy.html" class="small upper">More</a>
                        <br class="clear">
                    </div>
                    <div class="cell hundredfiftyp pl10">
                        <span class="small">Mar 22, 2011<br>
                            Bob Toner<br class="clear"></span>
                        <br>
                        <div class="table">
                            <div class="row top">
                                <a href="#">
                                    <div class="cell">
                                        <img class="mr5 ml5 inline" float="right" src="/libercus/default/graphics/notebook_add.png">
                                    </div>
                                    <div class="cell upper small bold">
                                        Add This to <br> my Notebook
                                    </div>
                                </a>    
                            </div>
                        </div>
                        
                        
                    </div>
                </div>
            </div>
            <hr>
            <div class="table hundred">
                <div class="row">
                    <div class="cell pr5 br">
                        
                        <h4><a href="/value/2011/03/18/Here-s-a-Porsche-Story-Copy.html">Porsche a Porsche...

CSS

.highlighted { background-color: red; }

JavaScript

jQuery.fn.highlight = function(str, className) {
    var regex = new RegExp(str, "gi");

    return this.each(function() {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {
            return "<span class=\"" + className + "\">" + matched + "</span>";
        });
    });
};

$(function() {
    $("#show_container").highlight("porsche", "highlighted");
});