Created
May 15, 2020 13:57
-
-
Save kosalvann/b00541e4c6beefca3e036a93d8a0ae1e to your computer and use it in GitHub Desktop.
Parse Message Variable Using regex to identify a specific message variable // source https://jsbin.com/caceged
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Using regex to identify a specific message variable"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Parse Message Variable</title> | |
| <style id="jsbin-css"> | |
| html, body { | |
| padding: 20px; | |
| margin: 0; | |
| height: 100%; | |
| } | |
| body * { | |
| font-size: 15px; | |
| font-family: arial, sans; | |
| line-height: 1.6; | |
| box-sizing: border-box; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script id="jsbin-javascript"> | |
| /** | |
| * A message variable is an alphanumeric string that | |
| * must start and end with a percent sign, ie %example%. | |
| */ | |
| const paragraph = `This is a message string containing some message variables, like %this% and %firstName% in camel case. Other variables can have dashes, like %abc-123-xyz%. We'll discard ones that are clearly a percent number, like 20%.`; | |
| /** | |
| * The regular expression pattern use | |
| * to match any message variable | |
| */ | |
| const regex = /%[a-zA-Z0-9-_]+%/g; | |
| /** | |
| * Display the list of message variables on page load | |
| */ | |
| window.addEventListener('load', () => { | |
| document.querySelector('#app') | |
| .innerHTML = parseMessageVariables(paragraph) | |
| }) | |
| /** | |
| * Parse a message string for message variables | |
| * | |
| * @param string message The message string | |
| * @return array A list of message variables | |
| */ | |
| parseMessageVariables = ((message) => { | |
| console.log(message.match(regex)); | |
| // return message.match(regex) | |
| }) | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">html, body { | |
| padding: 20px; | |
| margin: 0; | |
| height: 100%; | |
| } | |
| body * { | |
| font-size: 15px; | |
| font-family: arial, sans; | |
| line-height: 1.6; | |
| box-sizing: border-box; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">/** | |
| * A message variable is an alphanumeric string that | |
| * must start and end with a percent sign, ie %example%. | |
| */ | |
| const paragraph = `This is a message string containing some message variables, like %this% and %firstName% in camel case. Other variables can have dashes, like %abc-123-xyz%. We'll discard ones that are clearly a percent number, like 20%.`; | |
| /** | |
| * The regular expression pattern use | |
| * to match any message variable | |
| */ | |
| const regex = /%[a-zA-Z0-9-_]+%/g; | |
| /** | |
| * Display the list of message variables on page load | |
| */ | |
| window.addEventListener('load', () => { | |
| document.querySelector('#app') | |
| .innerHTML = parseMessageVariables(paragraph) | |
| }) | |
| /** | |
| * Parse a message string for message variables | |
| * | |
| * @param string message The message string | |
| * @return array A list of message variables | |
| */ | |
| parseMessageVariables = ((message) => { | |
| console.log(message.match(regex)); | |
| // return message.match(regex) | |
| }) | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| padding: 20px; | |
| margin: 0; | |
| height: 100%; | |
| } | |
| body * { | |
| font-size: 15px; | |
| font-family: arial, sans; | |
| line-height: 1.6; | |
| box-sizing: border-box; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * A message variable is an alphanumeric string that | |
| * must start and end with a percent sign, ie %example%. | |
| */ | |
| const paragraph = `This is a message string containing some message variables, like %this% and %firstName% in camel case. Other variables can have dashes, like %abc-123-xyz%. We'll discard ones that are clearly a percent number, like 20%.`; | |
| /** | |
| * The regular expression pattern use | |
| * to match any message variable | |
| */ | |
| const regex = /%[a-zA-Z0-9-_]+%/g; | |
| /** | |
| * Display the list of message variables on page load | |
| */ | |
| window.addEventListener('load', () => { | |
| document.querySelector('#app') | |
| .innerHTML = parseMessageVariables(paragraph) | |
| }) | |
| /** | |
| * Parse a message string for message variables | |
| * | |
| * @param string message The message string | |
| * @return array A list of message variables | |
| */ | |
| parseMessageVariables = ((message) => { | |
| console.log(message.match(regex)); | |
| // return message.match(regex) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment