Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<style>
  div{height:100px; border:solid 1px #DDD;}
  a{background:#000; color:#FFF; padding:2px 4px;}
</style>
<script>  
$(document).ready(function(){
  
  var hashRegEx = /#([^ ]*)/;//regex to detect hash values
    
    
  $('div#field').keyup(function(e){
    var val = $(this).html();
      
    var hashTag = hashRegEx.exec(val)
    if(hashTag!=null){//if there is a hash in the string
      if(e.keyCode==32 || e.keyCode==160){//check for space bar press
        var newVal = val.replace(/#([^ ]*)/,'');//remove hash tags
        $(this).html(newVal);//replace html with no hash tags
        
        var topic = hashTag[1];
        topic = topic.replace("&nbsp;","");//remove whitespace
        $('span').append('<p>' + topic + '</p>');//insert hash val into span
​
        $(this).contents().focus();//this fails to refocus
    }      
    }
    
    
  });
    
    
    
});
</script>
</head>
<body>
​
  <div id='field' contenteditable='true'>Add a twitter style hash topic <a contenteditable='false'>A random element</a></div>
  <span></span>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers