author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff. Follow me on Twitter, GitHub, Facebook or LinkedIn

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 GitHub 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 GitHub 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 gitHub 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. Or maybe comment below: