Creating a matching braces highlighter(Like a Code Editor) in JavaScript

Asked May 09 '14 at 05:47

Active May 09 '14 at 05:47

Viewed 128 times

I am building a widget like piece for webpage in which a user will type his code and I need to implement the brace highlighter on it. so if a user types

 if(a == b)

the braces around a and b should be highlighted with a color indicating the scope. When a user will click around any of these brackets,the other bracket and that bracket it self will be highlighted and same will happen when a user types in and a set of bracket is completed.

For this I am using a contenteditable div and using the window.getSelection() to determine if the character which was clicked/focused on was a brace and then wrapping span tag around it to give it a color.

I am using innerHTML to set the new HTML inside the div with colored brace,but the focus is reset to the start of the div.

I wanted it to behave like a generic code editor.

Any ideas/directions or some other approach are welcomed.

Regards.

asked May 09 '14 at 05:47

techie_28

2,123
4
41
62

Don't use `innerHTML`, use DOM manipulation. – Felix Kling May 09 '14 at 05:49
possible duplicate of [How to implement Lexical Analysis in Javascript](http://stackoverflow.com/questions/4726539/how-to-implement-lexical-analysis-in-javascript) – Evan Knowles May 09 '14 at 05:50
@FelixKling please give an example? – techie_28 May 09 '14 at 05:57
Does that means any other way to change the brace without using innerHTML? @FelixKling – techie_28 May 09 '14 at 06:18
using `.innerHTML` is technically DOM. But I think what he means is maybe create a text node perhaps. Check this out: http://codemirror.net/ @techie_28 – Brendan May 09 '14 at 06:38

Creating a matching braces highlighter(Like a Code Editor) in JavaScript

0 Answers0