javascript - Search for word and highlight with jquery -

i have written javascript file in jquery provides search function. trying figure out how highlight word aswell. bellow code.

filter.js:

(function ($) {   // custom css expression case-insensitive contains()   jquery.expr[":"].contains = jquery.expr.createpseudo(function(arg) {     return function( elem ) {         return jquery(elem).text().touppercase().indexof(arg.touppercase()) >= 0;     }; });   function listfilter(header, list, title) {     // header element, list unordered list, title element    // create , add filter form header    // create button collapse/expand title  var form = $("<form>").attr({"class":"filterform","action":"#"}),     button = $("<input>").attr({"class":"rest", "type":"submit", "value":"collapse all", "id":"switch"}),     input = $("<input>").attr({"class":"filterinput","type":"text", "placeholder":"search"});  $(form).append(input).appendto(header); //add form header $(title).append(button); //add button title   //on click function collapse/expand $("#switch").click(function(){     if($(this).val() == "collapse all"){         $(".filterinput").val("");         $(this).val("expand all");         $("div.content div.markdown").parent().parentsuntil(list).hide();         $(list).find("span.path").parentsuntil(list).show();         $(list).find("ul.endpoints").css("display", "none");     }     else{         $(".filterinput").val("");         $(this).val("collapse all");         $("div.content div.markdown").parent().parentsuntil(list).hide();         $(list).find("span.path").parentsuntil(list).show();     } });  $(input)   .change( function () {     var filter = $(this).val();     if(filter) {       // finds single string literal in div.markdown,       // , hides ones not containing input while showing ones         $(list).find("div.content div.markdown:not(:contains(" + filter + "))").parent().parentsuntil(list).hide();         $(list).find("div.content div.markdown:contains(" + filter + ")").parent().parentsuntil(list).show();     }      else {         $("div.content div.markdown").parent().parentsuntil(list).hide();         $(list).find("span.path").parentsuntil(list).show();         $(list).find("ul.endpoints").css("display", "none");     }     return false;   }) .keyup( function () {     // fire above change event after every letter     $(this).change(); }); }    //ondomready    settimeout(function () {     listfilter($("#header"), $("#resources"), $("#api_info"));    }, 250); }(jquery)); 

the html manipulate being dynamically created js file need manipulate dom after has been rendered.. html focusing on gets rendered bellow, specifially words in (div class="markdown").

index.html:

<div class="content" id="connectivitypacks_get_connectivitypacks_content">     <h4>description</h4>     <div class="markdown"><p>response return details connectivity packs based on id.</p>         <h2 id="keywords">keywords</h2>         <p> foo, bar, helloworld, java</p>     </div> </div> 

here example used markdown.

1. create regex word searching for.
2. get html of .markdown
3. replace word <span class="marker">"+ word +"</span>. creates span tag around word searching for.
4. create css style word needed.

function highlight(word) {    var element = $('.markdown');    var rgxp = new regexp(word, 'g');    var repl = '<span class="marker">' + word + '</span>';    element.html(element.html().replace(word, repl));    }    highlight('details');

.marker {    background-color: yellow;    font-weight: bold;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="content" id="connectivitypacks_get_connectivitypacks_content">    <h4>description</h4>    <div class="markdown">      <p>response return details connectivity packs based on id.</p>      <h2 id="keywords">keywords</h2>      <p>foo, bar, helloworld, java</p>    </div>  </div>