• JavaScript Video Tutorials

JavaScript - Symbol.replace Property

The Symbol.replace property is used to define the method invoked by the String.prototype.replace() function. Upon calling String.prototype.replace() with either a substring or a regular expression as its initial argument, JavaScript internally searches for the Symbol.replace property on the object passed to it. If detected, this function is called in order to carry out the replacement logic.

Developers can manipulate strings in JavaScript applications by creating custom Symbol.replace method, that alters the behavior of string replacement operations.

Syntax

Following is the syntax of JavaScript Symbol.replace property −

[Symbol.replace](string)

Parameters

This property accepts only one parameter i.e, String.

Return value

This property return a new string.

Examples

Example 1

Let's look at the following example, where we are going to use the Symbol.replace with the custom object.

<html>
   <style>
      body {
         font-family: verdana;
         color: #DE3163;
      }
   </style>
   <body>
      <script>
         const x = {
            [Symbol.replace](string, replace) {
               return string.replace(/To/g, replace);
            }
         };
         const a = "Welcome, To!";
         const y = a.replace(x, "To TutorialsPoint");
         document.write(y);
      </script>
   </body>
</html>

If we execute the above program, it will displays the text on the webpage.

Example 2

Consider the another scenario, where we are going to use the Symbol.replace for date formatting.

<html>
   <style>
      body {
         font-family: verdana;
         color: #DE3163;
      }
   </style>
   <body>
      <script>
         const x = {
            [Symbol.replace](y) {
               const date = new Date(y);
               return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
            }
         };
         const a = "02-07-2024";
         document.write(a.replace(x));
      </script>
   </body>
</html>

On executing the above script, it will displays a text on the webpage.

Example 3

In the following example, we are going to replace the vowels with the '*'.

<html>
   <style>
      body {
         font-family: verdana;
         color: #DE3163;
      }
   </style>
   <body>
      <script>
         const x = {
            [Symbol.replace](str) {
               return str.replace(/[aeiou]/gi, '*');
            }
         };
         document.write('TUTORIALSPOINT'.replace(x));
      </script>
   </body>
</html>

When we execute the script, it will displays a '*' on the webpage.

Example 4

Following is the example, where we are going to replace the digits with their doubled values.

<html>
   <style>
      body {
         font-family: verdana;
         color: #DE3163;
      }
   </style>
   <body>
      <script>
         const x = {
            [Symbol.replace](str) {
               return str.replace(/\d/g, match => match * 3);
            }
         };
         document.write('Raju had 3 chocolates and 2 biscuits'.replace(x));
      </script>
   </body>
</html>

On executing the above script, the output window will pop up, displaying the text on the webpage.

Advertisements