JSFiddle - React, Tailwind, and code Playground

by entropo

HTML

<div id="search-form">
    <legend>Search through this text</legend>
    <label for="keyword">Keyword</label> <input id="keyword" name="keyword" type="search"
    placeholder="e.g. - today" required="" autofocus="" />
    <div id="result"></div>            
</div>


<div id="speech">
    <p>I am happy to join with you today in what will go down in history as
        the greatest demonstration for freedom in the history of our nation.</p>
    <p>Five score years ago, a great American, in whose symbolic shadow we
        stand today, signed the Emancipation Proclamation. This momentous decree came as a great
        beacon light of hope to millions of Negro slaves who had been seared in the flames of
        withering injustice. It came as a joyous daybreak to end the long night of their
        captivity.</p>
    <p>But one hundred years later, the Negro still is not free. One
        hundred years later, the life of the Negro is still sadly crippled by the manacles of
        segregation and the chains of discrimination. One hundred years later, the Negro lives on a
        lonely island of poverty in the midst of a vast ocean of material prosperity. One hundred
        years later, the Negro is still languished in the corners of American society and finds
        himself an exile in his own land. And so we've come here today to dramatize a shameful
        condition.</p>
    <p>In a sense we've come to our nation's capital to cash a check.
        When the architects of our republic wrote the magnificent words of the Constitution and
        the Declaration of Independence, they were signing a promissory note to which every
        American was to fall heir. This note was a promise that all men, yes, black men as well as
        white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of 
        Happiness." It is obvious today that America has defaulted on this promissory note, insofar
        as her citizens of color are...

CSS

html, body { margin: 0px; padding: 0px; background: #CCC; font-family: corbel, 'lucida grande', helvetica, sans-serif;}

div {
    margin:        5px;
    padding:       5px;
}

p {
    padding-top:    0.5em;
    padding-bottom: 0.5em;
}

JavaScript

$("#keyword").keyup(function() {
    var value = $(this).val(),
        re = new RegExp(value, 'ig'),
        count = $("#speech").text().match(re).length;
    $("#result").text("Occurences: " + count);
});