Question

This would best be explained with examples.

Here is a line before I do anything:
Monohydrogen_Phosphate HPO%4^2-

Here is what I’ve done so far: Monohydrogen Phosphate | HPO%4^2-

Here is what it should be when finished: Monohydrogen Phosphate | HPO₄^2-

The % will put the first number (if any) and + or – signs (if any) in a <sub> tag, and the ^ will put the first number and +/- in a <sup> tag.

I am using Javascript’s RegEx replace, but I don’t mind switching to PHP.

Answer 1

I would use

str.replace(/([^\|])\s+([a-z]+)(%(\d+[+-]?))?(\^(\d+[+-]?))?/gi,'$1 | $2<sub>$4</sub><sup>$6</sup>');

Here’s an example:

<script type="text/javascript">

    var str = 'Monohydrogen_Phosphate HPO%4^2-';
    var str1 = str.replace(/([^\|])\s+([a-z]+)(%(\d+[+-]?))?(\^(\d+[+-]?))?/gi,'$1 | $2<sub>$4</sub><sup>$6</sup>');
    console.log('str:\t' + str + '\nstr1:\t' + str1);

</script>

which will output:

str: Monohydrogen_Phosphate HPO%4^2-
str1: Monohydrogen_Phosphate | HPO₄^2-

which, in HTML will be parsed like…

Monohydrogen_Phosphate | HPO₄^2-

---

EDIT:

I was thinking about compound(?) elements such as Li₂CO₃ so I came up with a longer but better solution.

function formatStr(str) {

    return str.replace(/([a-z]+)(%(\d+[+-]?))?(\^(\d+[+-]?))?/gi,function() {
    // this part allows stuck elements to be parsed right
    // such as Li%2CO%3 or H%2SO%4
        if (!arguments[3] && !arguments[5]) return arguments[0];
        var _str = arguments[1];
        _str += arguments[3] ? '<sub>' + arguments[3] + '</sub>' : '';
        _str += arguments[5] ? '<sup>' + arguments[5] + '</sup>' : '';
        return _str;
    }).replace(/(.+)\s+([a-zA-Z]+<su[bp]>.+<\/su[bp]>)$/,'$1 | $2');
    // and this part adds ' | ' to the beginning of the changed element
    // if there's any content before it. otherwise it's left as is
}