eggheadio-projects/regex-in-javascript: null

.DS_Store

# regex-in-javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Javascript Regular Expressions: Find Groups of Characters</title>
  <style>
    pre {
      line-height: 2;
    }
    span {
      background-color: #eee;
      padding: 1px;
      outline: 1px solid #999;
    }
  </style>
</head>
<body>
    <script>
    // Allows Plunker to display logs in preview panel 
    // for better in-browser experience
    var originalConsoleLog = console.log
    console.log = function () {
      originalConsoleLog.apply(console, arguments)
      var args = Array.prototype.slice.call(arguments);
      var stringifiedArgs = args.join(' ') + '\n';
      var newDiv = document.createElement("div"); 
      var newContent = document.createTextNode(stringifiedArgs); 
      newDiv.appendChild(newContent);
      document.body.appendChild(newDiv)
      
      document.querySelector('div').style['fontFamily'] = 'monospace';
      document.querySelector('div').style['fontSize'] = '1.5em';
    };
  </script>
  
  <pre></pre>
  <script src="script.js"></script>
</body>
</html>

'use strict';


var str = `800-456-7890
(555) 456-7890
4564567890`;

var regex = /\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}/g;

console.log(str.replace(regex, 'area code: $1'));

/**
 * @param  String str
 * @param  RegExp regex
 * @param  HTMLElement target
 */
const output = (str, regex, target) => {
  target.innerHTML =
    str.replace(regex, str =>
      `<span>${str}</span>`
    );
}
output(str, regex, document.querySelector('pre'));