[Javascript] How to use JavaScript's String.replace

In JavaScript, you can change the content of a string using the replace method. This method signature is overloaded with a bunch of different ways to do string replacement in JavaScript. This lesson covers the entire API (including an interestingDSL for the replacement string).

 

console.clear()

simpleStringReplace()
simpleRegexReplace()
globalRegexReplace()
regexReplaceGroup()
advancedRegexReplaceGroup()
simpleFunctionReplacer()
regexFunctionReplacerGroup()

console.log('Tests passed')


function simpleStringReplace() {
  var input = 'Perl is the best programming language'
  var expected = 'JavaScript is the best programming language'
  
  var result = input.replace('Perl', 'JavaScript')
  expect(result).toEqual(expected)
}

function simpleRegexReplace() {
  var input = 'My phone number is 123-555-3344'
  var expected = 'My phone number is xxx-xxx-xxxx'
  
  var result = input.replace(/\d{3}-\d{3}-\d{4}/, 'xxx-xxx-xxxx')
  expect(result).toEqual(expected)
}

function globalRegexReplace() {
  var input = 'The basketball is round, and the basketball is bouncy'
  var expected = 'The soccerball is round, and the soccerball is bouncy'
  
  var result = input.replace(/basketball/ig, 'soccerball')
  expect(result).toEqual(expected)
}

function regexReplaceGroup() {
  var input = 'Search with [Google](https://google.com), tweet with [Twitter](https://twitter.com)'
  var expected = 'Search with <a href="https://google.com">Google</a>, tweet with <a href="https://twitter.com">Twitter</a>'
  
  var result = input.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
  expect(result).toEqual(expected)
}

function advancedRegexReplaceGroup() {
  var input = 'foobarbaz'
  var expected = 'foofoo-bar-$-bazbaz'
  
  var result = input.replace('bar', '$`-$&-$$-$\'')
  expect(result).toEqual(expected)
}


function simpleFunctionReplacer() {
  var input = 'theAnswerToLifeTheUniverseAndEverything'
  var expected = 'the-answer-to-life-the-universe-and-everything'
  
  var result = input.replace(/[A-Z]/g, upperToHyphenLower)
  expect(result).toEqual(expected)
  
  function upperToHyphenLower(match) {
    return '-' + match.toLowerCase();
  }
}

function regexFunctionReplacerGroup() {
  var input = 'These are the replacer arguments'
  var expected = 'These are the replacer arguments: replacer, arguments, 14, These are the replacer arguments'
  
  var result = input.replace(/(replacer) (arguments)/, replacer)
  
  expect(result).toEqual(expected)
  
  function replacer(match, group1, group2, offset, wholeString) {
    return match + ': ' + [group1, group2, offset, wholeString].join(', ')
  }
}




console.clear()

simpleStringReplace()
simpleRegexReplace()
globalRegexReplace()
regexReplaceGroup()
advancedRegexReplaceGroup()
simpleFunctionReplacer()
regexFunctionReplacerGroup()

console.log('Tests passed')


function simpleStringReplace() {
  var input = 'Perl is the best programming language'
  var expected = 'JavaScript is the best programming language'
  
  var result = input.replace('Perl', 'JavaScript')
  expect(result).toEqual(expected)
}

function simpleRegexReplace() {
  var input = 'My phone number is 123-555-3344'
  var expected = 'My phone number is xxx-xxx-xxxx'
  
  var result = input.replace(/\d{3}-\d{3}-\d{4}/, 'xxx-xxx-xxxx')
  expect(result).toEqual(expected)
}

function globalRegexReplace() {
  var input = 'The basketball is round, and the basketball is bouncy'
  var expected = 'The soccerball is round, and the soccerball is bouncy'
  
  var result = input.replace(/basketball/ig, 'soccerball')
  expect(result).toEqual(expected)
}

function regexReplaceGroup() {
  var input = 'Search with [Google](https://google.com), tweet with [Twitter](https://twitter.com)'
  var expected = 'Search with <a href="https://google.com">Google</a>, tweet with <a href="https://twitter.com">Twitter</a>'
  
  var result = input.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
  expect(result).toEqual(expected);

// $2 --> (.*?) --> (https://google.com)
// $1 --> [.*?] --> [Google]
}

function advancedRegexReplaceGroup() {
  var input = 'foobarbaz'
  var expected = 'foofoo-bar-$-bazbaz'
  
  var result = input.replace('bar', '$`-$&-$$-$\'')
  expect(result).toEqual(expected)
}


function simpleFunctionReplacer() {
  var input = 'theAnswerToLifeTheUniverseAndEverything'
  var expected = 'the-answer-to-life-the-universe-and-everything'
  
  var result = input.replace(/[A-Z]/g, upperToHyphenLower)
  expect(result).toEqual(expected)
  
  function upperToHyphenLower(match) {
    return '-' + match.toLowerCase();
  }
}

function regexFunctionReplacerGroup() {
  var input = 'These are the replacer arguments'
  var expected = 'These are the replacer arguments: replacer, arguments, 14, These are the replacer arguments'
  
  var result = input.replace(/(replacer) (arguments)/, replacer)
  
  expect(result).toEqual(expected)
  
  function replacer(match, group1, group2, offset, wholeString) {
    return match + ': ' + [group1, group2, offset, wholeString].join(', ')
  }
}