Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id="hello">Hello World</p>
  <p id="hello">Hi dude</p>
  <div>some other text</div>
  <input type="text" id="highlighter"></input>
</body>
</html>
 
$(document).ready(function(){
  $("#highlighter").bind('keyup', function(e){
    var text = $.trim($(this).val());
    if(text !== '' && text !== ' '){
      var pattern = new RegExp(text, "gi");
    }
    $('p, div, span').each(function(i){
        var str = this;
        var orgText = $(str).text();
            orgText = orgText.replace(pattern, function($1){
            return "<span style='background-color: red;'>" + $1 + "</span>";
        });
     $(str).html(orgText); 
    });   
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers