Highlighting Paired Parentheses In React

In this blog, I am going to share the Leetcode(ish) solution for highlighting valid parentheses in a text. The solution is going to be used in a React component, so you can easily use this feature in your React projects.

Introduction

As leetcode is very useful in the process of preparing for interviews, even if you are not looking for a job, practicing here will also help to improve your problem-solving skills or your ability to look at problems from a different perspective.

One of the popular questions from Leetcode is Valid Parentheses problem. It asks you to find whether a given string is valid or not depending on whether it has all opening and closing pairs of parentheses.

With this blog, we are going to solve the same problem, but with some differences:

• There is only one type of parenthesis.
• The given string does not consist of only parentheses, but also other characters.
• We are not going to return a boolean value, instead we are going to highlight the matched parentheses.
• And we are going to use the solution in a React component.

By the way, I suggest that, before reading this blog, go to the Leetcode question link above, and try to solve it.

Final Code and Demo

You can find the full code and a demo for the subject of this blog, from here.

The Problem: Highlight Valid Parentheses

What does valid mean? It means the given string includes paired parentheses, and there is no any unmatched opening or closing parenthesis. Here are examples for invalid and valid inputs:

(my (best ((((((1904)    -- INVALID

((your best) ((1807)))   -- VALID

So how do we find all paired parentheses in a text? Well, what we do actually: while reading the text, from left to right, we pair the first encountered closing parenthesis, ), with the last opening parenthesis. Therefore in our solution, we can use a stack. We can push opening parentheses. And if we encounter a closing parenthesis, we can easily obtain the recent opening parenthesis from the stack, and match with the current closing one. And pop the last proccessed opening paranthesis from stack and thus update the recent element and continue to our operation. Most of the popular languages provide a built-in stack, but Javascript doesn't. If you don't know what stack, it is a data structure, the newest element added to the stack will be processed first. So the last pushed element will be poped first. It is like a Javascript array with the push and pop operations. Since we are going to highlight the paired parentheses, we need to know the index values of matched parentheses. So for our problem, we need to use an array, highlight corresponding indices. Let's see the solution:

/**
 * highlights valid parenthesis
 */
import React from 'react'
import './style.scss'

const HighlightParentheses = ({ text }) => {
  // initialize a stack for parentheses:
  const parenthesesIndexStack = []
  // initialize an array with length text.length, with inital values are false:
  const higlightedIndices = Array(text.length).fill(false)
  for (let i = 0; i < text.length; i++) {
    if (text[i] === '(') {
      parenthesesIndexStack.push(i)
    } else if (text[i] === ')' && parenthesesIndexStack.length !== 0) {
      // since paired parentheses are found, set corresponding indices' as true:
      higlightedIndices[parenthesesIndexStack.pop()] = true // opening parenthesis
      higlightedIndices[i] = true // closing parenthesis
    }
  }
  return (
    <>
      {[...text].map((char, i) => (
        <>{higlightedIndices[i] ? <i className="highlight">{char}</i> : <>{char}</>}</>
      ))}
    </>
  )
}

export default HighlightParentheses

1. In line 9, we initialize a stack for index values of opening parentheses. It is required to find matched parentheses.
2. In line 11, we initialize an array with the length of the given text. Initially, all values in the array are false, meaning all characters are not highlighted at first. This array is required to store the indices of the matched parentheses. Its length must be same with the given text.
3. While reading the given text, if we encounter an opening parenthesis we push it with line 14.
4. If we encounter a closing parenthesis we pop the recent opening parenthesis' index value from parenthesesIndexStack. Since it is paired, we set its value as true in higlightedIndices array with line 17.
5. And we set the current closing parenthesis' index value as true with line 18.
6. In the render method, we add highlight className if the index value is true with line 24.

An example usage of the HighlightParentheses component is very simple, it accepts text as prop:

  <HighlightParentheses text={text} />

css for the highlight:

i.highlight {
  font-style: normal;
  color: #ff22e9;
}

Follow up

As a bonus, I encourage you to try to solve this problem with three types of parentheses, and assign different highlight colors for each type of paired parentheses.

Conclusion

In this blog, I share how you can highlight valid(matched) parentheses in a text with React component. For this we use stack data structure and additionally an array to mark the valid parentheses indices. This blog is kind of interview preparation for frontend developers, because the problem we deal with requires problem solving and react development skills. I hope this blog could help you in your work and encourage you to develop your problem solving skills... Thank you for reading.