1

For instance, i have a text in my contenteditable div like this:

<div id = "board">
    <div>#include<iostream.h></div>
    <div></div>
    <div>int main(){</div>
    <div>
        clrscr
           <span id="openParen">(</span>
           <span id="closeParen">)</span>     
        ;   
    </div>
    <div>return 0;</div>
    <div>}</div>
</div>

If i saw some keywords, it would be wrap in span. 

<div id = "board">
    <div><span class="fragment">#include<iostream.h></span></div>
    <div></div>
    <div>int <span class="fragment">main</span>(){</div>
    <div>
        <span class="fragment">
        clrscr
           <span id="openParen">(</span>
           <span id="closeParen">)</span>     
        ;
        </span>   
    </div>
    <div>return 0;</div>
    <div>}</div>
</div>

Im done wrapping keywords like #include and main but i am unable to wrap clrscr() using this code (from https://stackoverflow.com/users/2684660/funkwurm): 

$('#board').children().each(function(index, child) {
   var text = $(child).html();
       text = text.replace(/(#include(\s*&lt;.*&gt;)?)/g, '<span class="frag">$1</span>');
       text = text.replace(/(main)/g, '<span class="frag">$1</span>');
       text = text.replace(/(clrscr)/gi, '<span class="frag">$1</span>');
       $(child).html(text);
});
Community
  • 1
  • 1
  • It's not really clear what you're asking. Do you need help in matching the keywords or help to wrap some of them in spans? – dcro Aug 30 '13 at 16:46
  • 1. match them 2. then wrap them –  Aug 30 '13 at 16:47
  • Then you first need to figure out what keywords you're actually trying to match. Regex replace might be an option, but it really depends on what you're looking to match. – dcro Aug 30 '13 at 16:48
  • #include and main for a moment –  Aug 30 '13 at 16:50
  • @fireflieslive but you also want `` with `#include` in that case you either have `#include` or `#include ` as your key words! –  Aug 30 '13 at 16:51
  • @rps: Ok, so /#include\s*<\s*iostream\.h\s*>/ for matching? how about wrapping them? –  Aug 30 '13 at 16:55
  • I'll swear there's a jQuery plugin that does all this for you, so you don't need to re-invent the wheel. – TravisO Aug 30 '13 at 17:14

2 Answers2

3

jQuery version (non CoffeeScript) working jsFiddle

$('#board').children().each(function(index, child) {
    var text = $(child).html();
    text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
    text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
    $(child).html(text);
});

Turns out you can't use text() like I suggested under dcro's answer.

asontu
  • 4,548
  • 1
  • 21
  • 29
  • i gave an update, do you know what's wrong with that? i used your code –  Aug 30 '13 at 20:07
  • As TravisO is also suggesting, you're re-inventing the wheel by trying to write your own syntax-highlighter. A quick Google gave me an article about [10 jQuery syntax highlighters](http://www.jquery4u.com/plugins/10-jquery-syntax-highlighters/) with links and all. – asontu Aug 30 '13 at 20:23
  • No, no its not for syntax highlighting, this is some kind of a code tracer –  Aug 30 '13 at 20:24
  • It's unclear to me what exactly you're trying to achieve in the **update** part of your question, and I still think you can probably do it with an existing jQuery plug-in. Either search for a code tracer plug-in or use the high-lighting plug-ins to achieve your goal of tracing rather than highlighting. – asontu Aug 30 '13 at 20:28
  • Your code is not wrapping clrscr, maybe because of the span within it? i just want to wrap that clrscr –  Aug 30 '13 at 20:30
  • 1
    Ah, you want it to also include the paratheses, you could change the regex to `(clrscr[^;]*)`. But again, trying to make regexes to pull apart a programming language is an ill-advised endeavor. – asontu Aug 30 '13 at 20:37
  • It works fine, thanks. lol you are right, regex is not suitable for this, let me just finished this project. thanks –  Aug 30 '13 at 20:41
  • if u just want to, the closing span tag cant go up to the ; if i have cout<<"something"< –  Aug 30 '13 at 21:06
1

To match #include, #include , main() and main(..some arguments..) you could go trough the children of the original div and for each line to the matching and replacement using regular expressions:

text = child.html();
text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
child.html(text);

Check out the JSFiddle demo. You will probably need to adjust the regular expressions for your own use case.

dcro
  • 13,294
  • 4
  • 66
  • 75
  • its my first time to see that &lt and &gt, can you please give some reference of that so that i can study them –  Aug 30 '13 at 17:09
  • 1
    < and > are encoded in HTML as < and > / Because you're working with encoded text (`child.html()` returns the raw HTML contents) you need to use those HTML entitites. – dcro Aug 30 '13 at 17:11
  • 1
    $1 means to replace them with the first matched group, basically everything between the outermost ( and ) in the regex – dcro Aug 30 '13 at 17:12
  • this is applicable if i only have the blue box and doesnt have the green box right (your fiddle)? –  Aug 30 '13 at 17:17
  • I would use `text = child.text()` to get the text without html parsing, then after the replacements indeed do `child.html text`. (btw I didn't see the OP saying they use CoffeeScript, but either way) – asontu Aug 30 '13 at 17:25
  • @funkwurm: can you convert this to js/jquery? –  Aug 30 '13 at 17:36
  • @funkwurm your proposed change wouldn't work correctly. If you read it as `.text()`, do the replace and add them back as `.html`, you would be adding back the unencoded version of strings like '' and that would be interpreted as a HTML tag. – dcro Aug 30 '13 at 18:06
  • @Mathletics I take it you don't really like CoffeeScript :) – dcro Aug 30 '13 at 18:21
  • I like CoffeeScript just fine. However I think it's presumptuous to answer plain JS questions in Coffee, as _most_ devs (especially newbies) don't know it. – Evan Davis Aug 30 '13 at 18:23
  • 1
    The differences between the two versions are minimal and I think most developers should be able to understand the concept behind that code, even if it's in coffee. Ultimately the goal of StackOverflow is not to provide code that can be copy/pasted but to help others with directions when they get stuck. But I've added the missing pieces to convert it to JS to avoid confusions. – dcro Aug 30 '13 at 18:30
  • @dcro: I have an update, does $1 mess up having that structure? –  Aug 30 '13 at 19:59
  • 1
    Seeing the comments here reminds me of what happened in [this answer](http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard/17528590#17528590) but then I read them more closely and I have to agree here - if it's easy enough to write JS then just write JS and save everyone a headache. There are better ways to copy-proof code than to obfuscate it into a totally different language. – BoltClock Aug 30 '13 at 20:00