Using Javascript Regex to extract specific content within brackets while retaining the original bracket pairs

I'm currently developing a software program designed to simplify the coding process for Discord bots. One of the features I wanted to include was inline functions, but unfortunately, my regex selector isn't quite up to the task.

The program is set up to iterate through each inline function, checking if it appears in the string and then replacing it with the corresponding value. For instance, {ping} would be replaced with 91, and {id author} would display the ID of the message author.

However, the issue arises when there are inline functions nested within other inline functions. While I've managed to handle one level of nesting, as the complexity increases, my regex selector falls short and ends up matching incorrect segments.

What I need is a regex selector that can correctly identify patterns like this:

{avatarurl {id {message}}}
           ^^^^^^^^^^^^^^

It should also be able to match instances like:

{avatarurl {id {message}}}
               ^^^^^^^^^

And even more complex examples such as:

{avatarurl {id {message}}}
^^^^^^^^^^^^^^^^^^^^^^^^^^

In essence, the regex selector should begin with {(function name) and end with } while successfully identifying nested patterns.

The current regex pattern that has been unsuccessful is:

new RegExp(`\{${func.name}([^\}]+[^])*\}`)

func.name represents the function's name. Additionally, I require the ability to extract the segment between "{funcname" and "}".

Answer №1

This specific algorithm provides a solution for handling brackets without using regular expressions, even if the input is unbalanced.

After constructing the tree, it's possible to search for matching elements by traversing through it.

Note: The algorithm has been encapsulated into a class structure.

class BracketTree {

    constructor (brackets, string) {

        if (typeof brackets != 'string' || brackets.length != 2 || brackets[0] == brackets[1]) {
            return null;
        }

        let opening = brackets[0];
        let closing = brackets[1];

        function parse (start) {

            let children = [];
            let pos = start;

            loop: while (pos < string.length) {

                switch (string[pos]) {

                case opening:
                    let child = parse(pos + 1);
                    children.push(child);
                    if (child.end == string.length) {
                        break loop;
                    }
                    pos = child.end;
                    break;

                case closing:
                    if (start == 0) {
                        children = [{
                            children, start, end: pos, opened: false, closed: true,
                            contents: string.slice(0, pos)
                        }];
                    }
                    else {
                        return {
                            children, start, end: pos, opened: true, closed: true,
                            contents: string.slice(start, pos)
                        };
                    }
                }

                pos++;
            }

            return (start == 0)? {
                children, start, end: string.length, opened: false, closed: false,
                contents: string
            }: {
                children, start, end: string.length, opened: true, closed: false,
                contents: string.slice(start)
            };
        }

        this.root = parse(0);
    }

    traverse (callback) {

        if (typeof callback != 'function') {
            return false;
        }

        let root = this.root;
        let input = root.contents;
        let nodeId = 0;

        function recurse (parent, level) {

            function callbackLeaf (start, end) {
                callback({
                    root, parent, level,
                    nodeId: nodeId++, childId: childId++,
                    start, end, contents: input.slice(start, end)
                });
            }

            function callbackBranch (branch) {
                return callback({
                    root, parent, branch, level,
                    nodeId: nodeId++, childId: childId++
                });
            }

            let children = parent.children;
            let childId = 0;
            if (children.length == 0) {
                callbackLeaf(parent.start, parent.end);
                return;
            }

            callbackLeaf(parent.start, children[0].start - children[0].opened);
            if (callbackBranch(children[0])) {
                recurse(children[0], level+1);
            }

            for (var i = 0; i < children.length-1; i++) {
                callbackLeaf(children[i].end + children[i].closed, children[i+1].start - children[i+1].opened);
                if (callbackBranch(children[i+1])) {
                    recurse(children[i+1], level+1);
                }
            }

            callbackLeaf(children[i].end + children[i].closed, parent.end);
        }

        recurse(root, 0);
        return true;
    }
}

let input = 'NOT OPENED {3}2}1}***{avatarurl {id {message}}} blah blah blah {1{2{3} NOT CLOSED';
let tree = new BracketTree('{}', input);

function filteredTraverse (caption, leafFilter, branchFilter) {
    console.log(`${'-'.repeat(29 - caption.length/2)} ${caption} `.padEnd(60, '-'));
    leafFilter ??= () => true;
    branchFilter ??= () => true;
    tree.traverse((args) => {
        if (args.branch) {
            return branchFilter(args);
        }
        if (leafFilter(args)) {
            console.log(`${'  '.repeat(args.level)}<${args.contents}>`);
        }
    });
}

filteredTraverse(
    'Ignore unbalanced and all their descendants',
    null,
    ({branch}) => branch.opened && branch.closed
);

filteredTraverse(
    'Ignore unbalanced but include their descendants',
    ({parent}) => parent.opened == parent.closed
);

filteredTraverse(
    'Ignore empty',
    ({start, end}) => start != end
);

filteredTraverse(
    'Show non-empty first children only',
    ({childId, start, end}) => childId == 0 && start != end
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with React-Native FlatList's scrolling functionality

Struggling with implementing a scrolling FlatList in React Native. Despite trying various solutions found on Stack Overflow, such as adjusting flex properties and wrapping elements in views, the list still refuses to scroll. Snippet of code (issue is with ...

Updating JSON data within JavaScript

Currently, I am in the process of developing a webpage that pulls data from a json feed. However, I am looking to have it update every 30 seconds without refreshing the entire page, just refreshing the Div & Jquery elements. I have attempted various solut ...

Struggling to adjust the dimensions of a React Barcode to the specified width and height?

I've encountered an issue with resizing the React Barcode Image. I prefer all barcodes to have a width of 200px and a height of 100px. From what I understand, the width of the barcode will expand when the length value increases. Below is my current co ...

Create text that alternates between blinking and changing content simultaneously

I'm currently working on a website and I am curious about how to achieve the effect of making text blink and change content simultaneously, similar to what is seen on this particular website . Sorry for not being more specific in my question. Thank yo ...

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

Creating a fixed-size set in React with randomly ordered elements

I am currently working on a project where I need to retrieve a random array from a .json file using React. My goal is to create 16 cards, each displaying a number that appears twice. To ensure uniqueness, I am utilizing a Set, but I am facing an issue with ...

Sending a user to an external website through an XML response

In my current project, I am utilizing jQuery to fetch a PHP file. The PHP file executes a cURL request to an external website in order to obtain information for a payment request. The external site responds with XML data structured as follows: <Request ...

When users visit my contact HTML page, they are redirected to the contact PHP page, but unfortunately, the email is

I am currently facing an issue with my contact form. After filling out the form and hitting the "send" button, it redirects to the contact.php page but fails to send an email or work as intended. Can someone please assist me and identify what's causin ...

React text area value not updating as expected without manual intervention

Recently, while experimenting with React, I created an app that allows users to display and modify any property in the component state directly from the component itself. The concept is simple - you input a key (for example, "foo"), and the app loads the c ...

Uploading my application on multiple servers after making changes using AngularJS and PHP

Currently, I am working on an angular-php web application that is live online for multiple users, each on their own subdomain. These subdomains include: sub1.mydomain.com sub2.mydomain.com sub3.mydomain.com sub4.mydomain.com sub5.mydomain.com Issue: An ...

Transforming an HTML Java script for compatibility with ASP.Net using C#

Hey there! I've been given the task of converting a page from HTML to aspx, and I'm happy to say that I've successfully completed it. However, my main challenge now is getting a javascript function to run when the submit button is clicked. ...

Multi-file upload PHP form

I have successfully implemented a contact form with file upload functionality in my code. However, I am facing an issue in adapting it for multiple file uploads. Below is the structure of the form: <?php <form id="formulario" name="formulario" ...

The Zustand store does not reflect changes when the URL is updated

I have a Zustand store connected to the URL. See the code snippet provided below. import { create } from "zustand"; import { persist, StateStorage, createJSONStorage } from "zustand/middleware"; const pathStorage: StateStorage = { ge ...

Using node.js to import functions from another file

The code below is what I currently have: // app.js var exports = module.exports = {}; module.exports = function () { var exported = {}; .. exported.myFunction = function (data, callback) { .. } . ...

What are the steps to create a JSON file structured in a tree format?

Can you provide instructions on creating a JSON file in the following tree format? root child1 child11 child2 child21 child22 child3 child31 I am looking to generate a sample JSON file that adheres to the ...

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

Button for searching through the Bootstrap navigation bar

I'm currently working on adding a search menu to the navbar in two different designs - one for screens below 767px and another for screens above 767px. Although I have been successful in expanding the search bar, I am facing issues with the correct p ...

What is the best way to create a moving line using EaselJS and TweenJS?

My objective is to animate a line from point A to point B using the Tween function. I am utilizing the EaselJS drawing library and TweenJS for animation. Can I achieve this by using the moveTo function to animate a straight line from point A to point B? ...

Scripted AngularJS directive

Essentially, the directive I have defined as sample.js is: app.directive('myDirective', function() { return { restrict: 'E', scope: { info: '=' }, templateUrl: 'link-to-sam ...

Concealing the div during the initial page load

person.jsp <script type="text/javascript"> function validateadvance() { document.getElementById("fn").style.visibility = "visible"; } $(function() { $(".dp").datepicker(); }); </s ...