Javascript (or jQuery) string replacement

Question

So, I have strings pulled from a JSON array like this:

Hg22+
CO32-
Al3Cl23+

These numbers need to be superscript or subscript, with rules. It's only numbers 0-9, and if that number has a plus or minus after it, it needs to be superscript, meaning I need to change the string to <sup>3+</sup>. All other numbers, if they haven't been superscripted, need to be subscripted. Here are a few examples of what I need:

C12H22O11 (s, sucrose) = <sub>1</sub><sub>2</sub>H<sub>2</sub><sub>2</sub>O<sub>1</sub><sub>1</sub> (s, sucrose)

Al3Cl23+ = Al<sub>3</sub>Cl<sub>2</sub><sup>3+</sup>

Hg22+ = Hg<sub>2</sub><sup>2+</sup>

I can do it, but very sloppily. I am really open to a good way to change string like above. If anyone can help out I'd be really appreciative!

Thanks!

• Nathan Tuggy: How are you currently solving this, and what's wrong with that code? Please edit that into your question.
• mrphuzz: I didn't implement it, because I know it would have been completely gross and unwieldy. Definitely couldn't have used regex on my own, and I knew regex would be by far the best way to go.

Answer 1

Easy.

var result = input.replace(/\d([+-]?)/g,function(match,plus) {
 var s = plus ? "sup" : "sub";
 return "<"+s+">"+match+"</"+s+">";
});

Done.

• Kokizzu: first blood! XD but you're missing - and g flag

Answer 2

Slightly modified from @Niet the Dark Absol's answer

var tests = ['Hg22+', 'CO32-', 'Al3Cl23+','C12H22O11 (s, sucrose)'];
function chemize(input) {
 return input.replace(/\d([\+\-]?)/g,function(match,plus) {
 var s = plus ? "sup" : "sub";
 return "<"+s+">"+match+"</"+s+">";
 }); 
}
for(var z in tests) {
 var test = tests[z];
 console.log('"' + test + '" --> ' + chemize(test) );
}

Output:

"Hg22+" --> Hg<sub>2</sub><sup>2+</sup>
"CO32-" --> CO<sub>3</sub><sup>2-</sup>
"Al3Cl23+" --> Al<sub>3</sub>Cl<sub>2</sub><sup>3+</sup>
"C12H22O11 (s, sucrose)" --> C<sub>1</sub><sub>2</sub>H<sub>2</sub><sub>2</sub>O<sub>1</sub><sub>1</sub> (s, sucrose)

• mrphuzz: Thanks both to you and Niet! I thought I replied last night, but apparently didn't. With the addition of the g flag to Niet's code, it was perfect... almost. As I was analyzing results, I noticed something I didn't catch before. Sometimes, there will be a plus or minus without a number preceding it. For example, "Cs+" or "Br- (aq)". In that case, the plus or minus would also need to be superscripted. Being that regex stuff makes my eyes go fuzzy, I am curious, what is the difference between your code and Niet's? Again, I REALLY appreciate the solutions! Never could have done it...
• Kokizzu: there's nothing difference for now, previously his answer lacks of - (minus sign) and g (global replace)
• Kokizzu: you could see his old answer here: stackoverflow.com/revisions/28246776/1