How to change a chord in a
tag to bold

Question

I have a string with chords like this

Bb
This is amazing grace   
Eb
This is unfailing love   
Gm
That You would take my place   
F
That You would bear my cross

I used regex to match and replace the chords with strong tag

const boldLyrics = lyrics?.replace(
    /(\b([CDEFGAB](?:b|bb)*(?:#|##|sus|maj|min|m|aug)*[\d\/]*(?:[CDEFGAB](?:b|bb)*(?:#|##|sus|maj|min|m|aug)*[\d\/]*)*)(?=\s|$)(?! \w))/gm,
    `<strong>$1</strong>`
);

and called it as pre {boldLyrics} pre

but it keeps on showing the texts like this.

<strong>Bb</strong>   
This is amazing grace

I am assuming it is JS/TS. Then, which framework are you using? Or, could you please give more code in the context? — Dummmy, Aug 31 '21 at 09:23

score 1 · Accepted Answer · answered Aug 31 '21 at 10:04

In React.js/JSX,

React DOM escapes any values embedded in JSX before rendering them ...(to help) ...prevent XSS (cross-site-scripting) attacks.

-- https://reactjs.org/docs/introducing-jsx.html

Here is how to prevent React from escaping the raw HTML: Is there some way to avoid HTML escaping of text children when calling React.createElement?.

Do not forget to check the first link for advisory on potential XSS attack problems.

How to change a chord in a tag to bold

1 Answers1

How to change a chord in a
tag to bold