Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

Javascript string replace and regular expression

The replace method in JavaScript is pretty much the same as in the other languages. Replace part/s of a string with something else. However, there are some tricky moments and I wanted to write this article, because I met this problem several times in the past. Actually, very often I use my blog as a documentation for myself and this is one of those cases. Probably I'll be in the same situation after week or so and I'll just check here for the proper solution.

Let's say that I have the following text

At the heart of GitHub is Git, an open source project started by Linux 
creator Linus Torvalds.

The task is simple - change specific word/s of the string to regular html links. The idea is that I don't know the part which I have to transform. I have to write a javascript function which accepts string, finds that string in a specific text and transform it to link tags. Here is the first version

var changeText = function(word) {
    element.innerHTML = text.replace(word, '[' + word + '](#)');
}
changeText('Git');

And the result is

At the heart of [Git](#)Hub is Git, an open source project
started by Linux creator Linus Torvalds.

So, it finds Git and successfully replace it with a link, but it looks like that it catches only the first match. I.e. there is another Git. I had to use regular expression and make the replace global.

var changeText = function(word) {
    var r = new RegExp(word, "g"); // global match
    element.innerHTML = text.replace(r, '[' + word + '](#)');
}
changeText('Git');

And now it looks better:

At the heart of [Git](#)Hub is [Git](#), an open 
source project started by Linux creator Linus Torvalds.

However, sometimes the text send to the function will not match the letter case. For example if I pass just git I'll not get any results. There is another flag for this situation - ignore case.

var changeText = function(word) {
    var r = new RegExp(word, "gi"); // global match and ignore case flag
    element.innerHTML = text.replace(r, '[' + word + '](#)');
}
changeText('git');

The fianl output looks like that:

At the heart of [git](#)Hub is [git](#), an open
source project started by Linux creator Linus Torvalds.

Now there is another problem. In the original text the word Git is with big G, but in the new markup is with lower g. That's because I'm using directly the function's parameter. Somehow I should get the matched text and use it in the replacement. That's, of course, possible and here is the final version of the method:

var changeText = function(word) {
    var r = new RegExp("(" + word + ")", "gi"); // global match and ignore case flag
    element.innerHTML = text.replace(r, '[$1](#)');
}
changeText('git');

Here is a little jsfiddle that illustrates the produced function

If you enjoy this post, share it on Twitter, Facebook or LinkedIn.