-6

How do I change the color of all words that start with the # character to blue in a content-editable div while the user is typing. All it does right now is color all the matches but only if they come after a no matched word. Like this:

#life randomness #death more nothing #trees

But this doesn't work:

I ate an apple #yum #doctoraway #healthy #diet

here's a fiddle: http://jsfiddle.net/GEm75/

The way I am doing it now is by wrapping each match in a span and then styling it with css. I encountered a problem where the non-matched text after hashtag was still the same color as the hashtag. I solved that, but very inefficiently and I desperately want an alternative. Here's my code:

<div id="box" style="border: 1px solid black; height: 10em" contenteditable="true">
</div>

function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
    && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

var inp = $('#box');
//select the box div
var text = '';
//#box's default value
inp.on('keyup', function(e) {
    text = inp.html();
    var matches_hash = text.match(/(^|\s)#(\w+)/g);
    if (matches_hash) {
        text = text.replace(/(^|\s)#(\w+)/g, "</span><span class='hashtag'> #$2</span><span class='else'>");
        inp.html(text);
        placeCaretAtEnd(document.getElementById('box'));
    }
});
</script>

I am wondering if there is a more efficient way of doing this. Also the problem where hashtags have to be separated by non hashtag text. I ran my regular expressions through a regex tester and it worked fine.

http://regex101.com/r/iF3iZ8

the function placeCaretAtEnd(el) was made by someone else, I did not make it. But all it does is place the caret at the end of the editable div.

If you have questions drop me a comment

Please help me.

nitrous
  • 1,677
  • 4
  • 15
  • 18
  • This question is very very very very very general. There is simply no answer to it. What are you doing? What is your architecture? You are asking for a "language" to this in? Have you done *anything* ? – Christophe De Troyer Jan 20 '14 at 00:53
  • With all due respect if you're not sure what language you need then a) not sure where we are meant to direct you b) your skill level isn't likely high enough, sorry! You might want to start learning PHP.... – tim.baker Jan 20 '14 at 00:53
  • I edited my question and now it is more relevant and easier to answer. Please unclose my question. – nitrous Mar 12 '14 at 02:55

1 Answers1

1

There are many ways to do this, but here's the idea behind one way. Hopefully it'll get your creative juices flowing.

Set up a relational database (possibly MySQL) and create a post table to store the posts. Let's say the post table has these fields:

integer unsigned auto increment primary key id
timestamp posted
integer unsigned user_id
text comment

Now, you need to make another table to store the hashtags. Let's call this hashtag and use this structure:

integer unsigned auto increment primary key id
integer unsigned post_id
text tag

The post_id in the hashtag table will point you to the post row that the hashtag belongs to. Now, in MySQL, you can run this query:

SELECT post.* FROM hashtag LEFT JOIN post ON post.id = post_id WHERE tag = "life"

This query will fetch all the posts with the "life" hashtag.

Zach Rattner
  • 20,745
  • 9
  • 59
  • 82