I have this regex that matches text inside parentheses:

/\([^\)]*?\)/g

I want to be able to match both parentheses and brackets so it will detect both parentheses and brackets in a string so I can color it.

This should be the string:

The (quick) brown [fox]

I want to color (quick) and [fox] so I need the regex to match both parentheses and brackets.

Thanks.

I have this regex that matches text inside parentheses:

/\([^\)]*?\)/g

I want to be able to match both parentheses and brackets so it will detect both parentheses and brackets in a string so I can color it.

This should be the string:

The (quick) brown [fox]

I want to color (quick) and [fox] so I need the regex to match both parentheses and brackets.

Thanks.

• javascript
• regex

• How about /[(\[][^\)\]]*?[)\]]/g? – SamWhan Commented May 13, 2016 at 8:49

4 Answers 4

This should work:

/\([^)]*\)|\[[^\]]*\]/g;

Try it out below:

var str = "The (quick) brown [fox]";

var re = /\([^)]*\)|\[[^\]]*\]/g;

str.match(re).forEach(function(m) {
  document.body.insertAdjacentHTML('beforeend', m + '<br>');
});

Regex101

Here is the solution I use, based on popular xregexp package by Steve Levithan.
Note that left and right params are regx expressions so the solution can handle more difficult scenarios. Solution correctly handles nested parenteses as welll. Refer to http://xregexp.com/api/#matchRecursive for more details and options.

const XRegExp = require('xregexp');

// test: match ${...}
matchRecursive('${a${b}c} d${x} ${e${}${f}g}', '\\${', '}').forEach(match => {
    console.log(match.innerText);
});

/* yields:
a${b}c
x
e${}${f}g
*/

interface XRegExpPart { start: number; end: number; name: string; value: string; }
export interface XRegExpMatch { index: number; outerText: string; innerText: string; left: string; right: string; }

export function replaceRecursive(text: string, left: string, right: string, replacer: (match: XRegExpMatch) => string, flags: string = 'g', escapeChar?: string): string {
    const matches: XRegExpMatch[] = matchRecursive(text, left, right, flags, escapeChar);
    let offset: number = 0;

    for (const match of matches) {
        const replacement = replacer(match);
        if (replacement == match.outerText) continue;
        text = replaceAt(text, match.index + offset, match.outerText.length, replacement);
        offset += replacement.length - match.outerText.length;
    }
    return text;
}

export function matchRecursive(text: string, left: string, right: string, flags: string = 'g', escapeChar?: string): XRegExpMatch[] {
    // see: https://github.com/slevithan/xregexp#xregexpmatchrecursive
    // see: http://xregexp.com/api/#matchRecursive
    const parts: XRegExpPart[] = XRegExp.matchRecursive(text, left, right, flags, { valueNames: [null, 'left', 'match', 'right'], escapeChar: escapeChar });
    const matches: XRegExpMatch[] = [];
    let leftPart: XRegExpPart;
    let matchPart: XRegExpPart;

    for (const part of parts) {
        // note: assumption is made that left, match and right parts occur in this sequence
        switch (part.name) {
            case 'left':
                leftPart = part;
                break;
            case 'match':
                matchPart = part;
                break;
            case 'right':
                matches.push({ index: leftPart!.start, innerText: matchPart!.value, outerText: leftPart!.value + matchPart!.value + part.value, left: leftPart!.value, right: part.value });
                break;
            default:
                throw new Error(`Unexpected part name: '${part.name}'.`);
        }
    }

    return matches;
}

export function replaceAt(string: string, index: number, length: number, replacement: string): string {
    return string.substr(0, index) + replacement + string.substr(index + length);
}

This is it:

\(\w+\)|\[\w+\]

You can test it here.

This regex

/[(\[][^\)\]]*?[)\]]/g

should do it for you. It would allow mixing of brackets like this though.

The (quick] brown [fox)

See it here at regex101.