Skip to content

Instantly share code, notes, and snippets.

@jasonsperske

jasonsperske/highlight.html

Created May 15, 2014 00:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonsperske/2d26d3fd21d0b2fb0e9b to your computer and use it in GitHub Desktop.
Save jasonsperske/2d26d3fd21d0b2fb0e9b to your computer and use it in GitHub Desktop.
Download ZIP
Basic System to highlight keywords in a textarea (http://jsfiddle.net/KcP7m/)
Raw
highlight.html
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Textarea Highlighter</title>
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<style type="text/css">
#Status, #Highlighter {
width: 96%;
height: 250px;
font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 17.5px;
word-wrap: break-word;
position: absolute;
border-radius: 3px;
}
#Highlighter {
color: transparent;
top: 10px;
left: 10px;
white-space: pre-wrap;
}
#Highlighter b {
background: linear-gradient(#DCE6F8, #BDCFF1) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 2px;
box-shadow: 0 0 0 1px #A3BCEA;
font-weight: normal;
}
#Status {
background-color: transparent;
border: 1px #000 solid;
resize: none;
}
</style>
<script type="text/javascript">
$(window).load(function(){
var highlighter = $('#Highlighter'),
status = $('#Status'),
re = /([@|#][_\w']+)/g;
status.on('keyup input', function () {
var content = status.val(),
match,
start = 0,
output = '';
while (match = re.exec(content)) {
output += content.substring(start, match.index) + '&lt;b&gt;' + content.substring(match.index, match.index + match[0].length) + '&lt;/b&gt;';
start = match.index + match[0].length;
}
output += content.substring(start, content.length);
highlighter.html(output);
});
});
</script>
</head>
<body>
<div id="Highlighter"></div>
<textarea id="Status"></textarea>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment