Simple/Basic Jquery or Javascript String Replace for Multiple Values

Question

I have a database outputting either:

1. example-phrase
2. example2-phrase or
3. example-solution

And I need to replace these on the page load with:

1. Example Phrase
2. Example 2 Phrase
3. Example & Solution

I already have jQuery loaded on the page so I can use a jQuery solution, but I know it is also possible with some basic Javascript...the problem is I do not know any of either and the examples I'm finding are not doing what I need. I also need to be able to add more replacements in the future.

UPDATE: I have this from another project, but it replaces everything before (and including ) the "=" in any h2 elements on the page. That first line: var re = /^[^=]+=\s*/, losses me with all the symbols, though:

<script>
    var re = /^[^=]+=\s*/,
        elements = document.getElementsByTagName('h2')

    function processText(el) {
        el.textContent = el.textContent.replace(re, '');
    }

    for(var i = 0, l = elements.length; i < l; i++) {
        processText(elements[i]);
    }
</script>

Answer 1

Have a look at this:

As you said, your string (1) is:

var ex1 = "example-phrase";
var res1 = ex1.replace("-", " ");
res1 = res1.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});

The above solution works for the first case. For the 3rd case, just add the following,

var ex3 = "example-solution";
var res3 = ex3.replace("-", " ");
res3 = res3.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
res3 = res3.replace(" ", " & ");

I feel that checking every time you get a response isn't feasible.

Thanks to this answer

Answer 2

var REPLACEMENTS = {
    'example-phrase': 'Example Phrase',
    'example2-phrase': 'Example 2 Phrase',
    'example-solution': 'Example & Solution'
}

function doReplacement(input) {
    for (var key in REPLACEMENTS) {
        input = input.replace(key, REPLACEMENTS[key]);
    }

    return input;
}

Might not be the most performant solution though. You might need to ask yourself: Do you need case insensitivity? Can a single input contain more than one of the strings that need to be replaced? Is the string itself exactly equal to the replacement key or does it contain it?

EDIT

(Updated) AS I see per your update, you probably want to do this for all h2 tags. Try this code:

$(function() {
    var REPLACEMENTS = {
        'example-phrase': 'Example Phrase',
        'example2-phrase': 'Example 2 Phrase',
        'example-solution': 'Example & Solution'
    }

    function doReplacement(input) {
        for (var key in REPLACEMENTS) {
            input = input.replace(key, REPLACEMENTS[key]);
        }

        return input;
    }

    $('h2').each(function() {
        var $this = $(this);
        $this.html(doReplacement($this.html()));
    });
});