Click here to Skip to main content
15,942,292 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I'm working on writing my own JS, line-based programming text editor. Everything's going really well but I'm stuck on one feature, the graphical line you see in some editors which joins {} to form a code block. I've uploaded a screenshot of a hard-coded version linking lines 2-7 here[^].

What I'm having trouble with is figuring out which lines need to be linked. That is, parsing the code, picking out the {} and somehow deciding which ones form a pair.

This will have to deal with every possibility including erroneous ones, such as;

I'll only draw the graphic if the { and } are at the start of the line for now, implementing support for things like function x() { later on.

{
}
---
{

}
---
{
    {
}
---
{
    }
}
---
{
    {

    }
}
---
{
}

{
}


I'd just like some advice on the best approach please

What I have tried:

--------------------------------------------------------------------
Posted
Updated 10-Aug-18 10:50am
v2

1 solution

First make sure everything is "paired" (the opening and closing "brace counts" must be the same).

Then "read reverse" to "pair" braces.

Read reverse to find a "closing" brace; the matching "opening" brace is the one that includes any "child pairs" of braces.

By "counting" opening and closing braces as you read in reverse, you can match which brace goes with which; you can even determine what "level" you're at.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900