I have upvoted your question because you have presented an interesting problem (for me). As I mentioned in my comment, I doubt you can do something like that in a textarea. Simply because textareas do not support any formatting. You might be wondering how web based WYSIWYG editors work - well, they do not rely on textareas, they do other stuff. In HTML5 you have a neat attribute, named
contenteditable which makes what it promises. It makes life easier, but not that easy. I have made something that might look like what you wanted.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script type="text/javascript">
var needles = new Array();
function evalNeedles()
{
needles = $('#needle').val().split(',');
}
function handle()
{
var editor = $('#editor');
$.each(editor.contents().filter(
function() {
return this.nodeType === 3;
}),
function( index, value ) {
for(idx in needles){
start = value.textContent.search(needles[idx]);
if(start >= 0){
var range = document.createRange();
range.setStart(value, start);
range.setEnd(value, start + needles[idx].length);
var anode = document.createElement("a");
anode.href="#";
range.surroundContents(anode);
window.getSelection().collapse(anode, 1);
break;
}
}
});
}
$(function() {
evalNeedles();
$('#needle').bind("change", evalNeedles);
$('#editor').bind("keyup", handle);
});
</script>
</head>
<body>
<input type="text" id="needle" value="jack,drake,joey,pacino">
<div id="editor" contenteditable="true" style="border: 1px solid black; width: 300px; height: 100px; overflow: auto;">Edit this text!</div>
</body>
Submit an article or tip