javascript remove string before a specific character

Question

I've been looking and looking but can only find variations of the question I have...

I'm needing to remove a string before a character (including the character, and the spaces before and after the character). The string will be different each time and unpredictable, so no matter what it is it needs to be removed from the DOM. So, if this is the output:

<h2>Birds - Norwegian Yellow Finch</h2>
<h2>Cats - Domestic Shorthaired Tabby</h2>
<h2>Dogs - Alaskan Husky Cross</h2>

How do I remove "Birds - , Cats - , Dogs - "? And without being specific about those words (Birds, Cats, Dogs) because those will change. The dash (-) can be a different character, if needed (ie: *).

Answer 1

Here is a solution without using a regular expression http://jsfiddle.net/46G5c/ :

$('h2').each(function() {
    var h2 = $(this);
    var text = h2.text();
    var replacement = text.substr(text.indexOf('- ') + 2);
    h2.text(replacement);
});​

And here is one that uses a regular expression which may or may not be more useful depending on your data http://jsfiddle.net/X3FTV/1/ :

var regex = /^[^-]* - /;
$('h2').each(function() {
    var h2 = $(this);
    var text = h2.text();
    h2.text(text.replace(regex, ''));
});​

Both use jQuery but should be straight forward to change to plain JavaScript.

Answer 2

You can use a simple RegExp to solve this.

HTML:

<h2>Birds - Norwegian Yellow Finch</h2>
<h2>Cats - Domestic Shorthaired Tabby</h2>
<h2>Dogs - Alaskan Husky Cross</h2>​

JavaScript:

var re = /^[^-]+-\s*/;

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

var elements = ​document.getElementsByTagName('h2')​​​​;

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

DEMO

Answer 3

The following loops through all h2 elements and removes the beginning via a regex replace:

window.onload = function() {
    var h2s = document.getElementsByTagName("h2"),
        i;

    for (i=0; i < h2s.length; i++)
        h2s[i].innerHTML = h2s[i].innerHTML.replace(/^[^-]+ - /,"");​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
};

Demo: http://jsfiddle.net/nGfYd/5/

The onload handler ensures that the code runs after the page has finished loading, because JavaScript is executed as it is encountered while the page is being parsed, but it can only manipulate elements that have been already been parsed. You don't need the onload handler if you include the code in a script block after the elements in question, in fact my preference is to put the <script> block at the end of the body just before the closing </body> tag and not use an onload handler.

EDIT: From comments under other answers it seems you are happy to use jQuery, in which case you could do this:

$(document).ready(function(){
    $("h2").text(function(i, oldVal) {
        return oldVal.replace(/^[^-]+ - /,"");
    });
});

Demo: http://jsfiddle.net/nGfYd/7/

If you pass a function to .text() jQuery will call that function for each element, passing it the old (current) value of the element, so you don't need an .each() loop too.

(Again the document ready handler is not needed if you put the code in a script block at the end of the body.)