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 — Niels Reijnders, Apr 06 '22 at 18:45
At the next non number character- I'll make it clearer in the questions. — Thomas Franklin, Apr 06 '22 at 18:48

Niels Reijnders · Accepted Answer · 2022-04-07T09:32:46.720

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 07 '22 at 09:32

answered Apr 06 '22 at 19:59

Niels Reijnders

239
3
15

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 – Thomas Franklin Apr 07 '22 at 00:34
1

Oh didn't test that will update my answer – Niels Reijnders Apr 07 '22 at 07:46
what about super scipts? same kind of thing, or is there a different regex expression needed? – Thomas Franklin Apr 07 '22 at 12:04
1

Different regex https://stackoverflow.com/questions/35976910/regex-to-replace-all-superscript-numbers. You can combine them with the number one. – Niels Reijnders Apr 07 '22 at 15:16
thanks! what about negative numbers (just out of curiosity). – Thomas Franklin Apr 07 '22 at 18:30

React convert a string into element with sub and super scripts

1 Answers1