HTML
Zuerst benötigen wir die richtige HTML Struktur. Das wichtigste dabei ist eine textarea und das darüber liegende div, das ganze sollte noch mit einem zusätzlichen Element umschlossen werden.
<div class="textarea"> <textarea class="content"></textarea> <div class="hashtags"></div> </div>
CSS
Mit css sollten die Elemente richtig Positioniert werden. Dabei ist es wichtig, dass das div Element genau über das Textarea Element liegt. Zusätzlich sollte die Schrift bei dem Textarea Element ausgeblendet werden. Ich habe den span Element die Klasse .tag gegeben. Mit css kann man .tag entsprechend stylen.
.textarea{
position: relative;
overflow: hidden;
}
.content{
position: relative;
}
.hashtags{
position: absolute;
left: 0;
top: 0;
/*
* text color unsichtbar machen
/
color: rgba(0,0,0,0);
}
Javascript
Jetzt kommt der wichtigste Part: Javascript.
div kopiert.Es gibt zwei Möglichkeite, die ganze Geschichte umzusetzen.
- Keyup Event-Handler
- Request Animation Frame
Zeitgleich wird mit einem Regex überprüft, ob in dem Text ein Hashtag (#) vorhanden ist. Wenn ja, wird dieser und der gefolgte Text mit einen span Element versehen. Dadurch entsteht ein Typisches Hashtag Highlighting wie bei Facebook.
Ich persönlich bevorzuge "request Animation Frame". Bessere Performance und alles wird "sofort" aktualisiert. Auch z.b Bei Copy und Paste.
(function(){
'use strict';
var content = document.querySelector('.content');
var hashtags = document.querySelector('.hashtags');
var str;
// Umsetzung mit einem keyup Event Handler
/*
content.addEventListener('keyup', function(){
str = content.value;
str = str.replace(/#([a-zA-Z0-9]+)/g, '<span class="tag">#'+'$1'+'</span>');
hashtags.innerHTML = str;
});
*/
// oder mit RequestAnimationFrame
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){window.setTimeout(callback, 1000 / 60);};
})();
(function loop(){
requestAnimFrame(loop);
str = content.value;
str = str.replace(/#([a-zA-Z0-9]+)/g, '<span class="tag">#'+'$1'+'</span>');
hashtags.innerHTML = str;
})();
})();