React convert a string into element with sub and super scripts

Question

I'm trying to make a functional component that basically converts ^ and _ characters in a string to sub and super scripts. Here are some examples.

'example_3' -> <h1>example<sub>3<sub/><h1/>

should start a tag at a '_' or '^' and close the tag at the next non-number character.

'another_1234Example' -> <h1>another<sub>1234<sub/>Example<h1/>

also should be able to work for any amount of numbers

'something^2else_34' -> <h1>something<sup>2<sub/>else<sub>34<sub/> <h1/>

When do you want to end it? You can replace the _ or ^ with a <sub> — Niels Reijnders
– Niels Reijnders, Commented Apr 6, 2022 at 18:45
At the next non number character- I'll make it clearer in the questions. — Sylavn Franklin
– Sylavn Franklin, Commented Apr 6, 2022 at 18:48

Niels Reijnders · Accepted Answer · 2022-04-07 09:32:46Z

2

Solution 1 (over complicated):

const string = "another_1234Example_348jiwf_342";

console.log(
  (string.trim() + " ")
    .split("_")
    .join("<sub>")
    .split(/(?<=<sub>\d+)(?!\d)/g)
    .join("</sub>")
);

Split _ this will return an array, join a <sub> after that. Than check with regex if it matches a number with a start <sub>.

Link to regex: https://regex101.com/r/RFkEQa/1

Solution 2 (recommend):

It's better to use replace for this kind of stuff. Referring to this post: https://stackoverflow.com/a/50463993/8273193

const string = "another_1234Example_348jiwf_342";
console.log(string.replace(/(_\d+)/g, "<sub>$&</sub>").replace(/_/g, ""));

edited Apr 7, 2022 at 9:32

answered Apr 6, 2022 at 19:59

Niels Reijnders

2214 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sylavn Franklin Over a year ago

That works great in most cases: however it doesn't add the closing tag if the string ends with a number, and doesn't add one if there are multiple subscripts in the string

Niels Reijnders Over a year ago

Oh didn't test that will update my answer

Sylavn Franklin Over a year ago

what about super scipts? same kind of thing, or is there a different regex expression needed?

Niels Reijnders Over a year ago

Different regex stackoverflow.com/questions/35976910/…. You can combine them with the number one.

Sylavn Franklin Over a year ago

thanks! what about negative numbers (just out of curiosity).

Collectives™ on Stack Overflow

React convert a string into element with sub and super scripts

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related