Update index.mjs

index.mjs

@@ -2,183 +2,188 @@
 
 // Check which FormulaJS API is available when page loads
 document.addEventListener("DOMContentLoaded", function() {
-    console.log("FormulaJS API Check:");
-    if (window.formulajs) {
-      console.log("Using window.formulajs API");
-    } else if (window.Formula) {
-      console.log("Using window.Formula API");
-    } else {
-      console.warn("FormulaJS library not detected. Some functions may not work.");
-    }
+  console.log("FormulaJS API Check:");
+  if (window.formulajs) {
+    console.log("Using window.formulajs API");
+  } else if (window.Formula) {
+    console.log("Using window.Formula API");
+  } else {
+    console.warn("FormulaJS library not detected. Some functions may not work.");
+  }
+
+  const formulaSelect = document.getElementById("formula-select");
+  const paramsContainer = document.getElementById("params-container");
+  const calculateBtn = document.getElementById("calculate-btn");
+  const resultDiv = document.getElementById("result");
+  const formulaCodeDiv = document.getElementById("formula-code");
   
-    const formulaSelect = document.getElementById("formula-select");
-    const paramsContainer = document.getElementById("params-container");
-    const calculateBtn = document.getElementById("calculate-btn");
-    const resultDiv = document.getElementById("result");
-    const formulaCodeDiv = document.getElementById("formula-code");
-    
-    // Define parameters for each formula
-    const formulaParams = {
-      SUM: [
-        { name: "number1", type: "number", default: 1 },
-        { name: "number2", type: "number", default: 2 },
-        { name: "number3", type: "number", default: 3 }
-      ],
-      AVERAGE: [
-        { name: "number1", type: "number", default: 1 },
-        { name: "number2", type: "number", default: 2 },
-        { name: "number3", type: "number", default: 3 }
-      ],
-      MAX: [
-        { name: "number1", type: "number", default: 1 },
-        { name: "number2", type: "number", default: 2 },
-        { name: "number3", type: "number", default: 3 }
-      ],
-      MIN: [
-        { name: "number1", type: "number", default: 1 },
-        { name: "number2", type: "number", default: 2 },
-        { name: "number3", type: "number", default: 3 }
-      ],
-      PMT: [
-        { name: "rate", type: "number", default: 0.05 },
-        { name: "nper", type: "number", default: 36 },
-        { name: "pv", type: "number", default: 10000 }
-      ],
-      FV: [
-        { name: "rate", type: "number", default: 0.05 },
-        { name: "nper", type: "number", default: 10 },
-        { name: "pmt", type: "number", default: -100 },
-        { name: "pv", type: "number", default: -1000 }
-      ],
-      NPV: [
-        { name: "rate", type: "number", default: 0.1 },
-        { name: "value1", type: "number", default: -10000 },
-        { name: "value2", type: "number", default: 3000 },
-        { name: "value3", type: "number", default: 4200 },
-        { name: "value4", type: "number", default: 6800 }
-      ],
-      IRR: [
-        { name: "values", type: "array", default: "[-100, 39, 59, 55, 20]" }
-      ],
-      VLOOKUP: [
-        { name: "lookup_value", type: "number", default: 40 },
-        { name: "table_array", type: "array", default: "[[10, 'A'], [20, 'B'], [30, 'C'], [40, 'D'], [50, 'E']]" },
-        { name: "col_index_num", type: "number", default: 2 },
-        { name: "range_lookup", type: "boolean", default: false }
-      ],
-      REGEXEXTRACT: [
-        { name: "text", type: "string", default: "Extract 42 from this text" },
-        { name: "regular_expression", type: "string", default: "\\d+" }
-      ],
-      REGEXMATCH: [
-        { name: "text", type: "string", default: "Does this text contain numbers like 123?" },
-        { name: "regular_expression", type: "string", default: "\\d+" }
-      ]
-    };
-    
-    // Update parameters when formula changes
-    formulaSelect.addEventListener("change", updateParams);
-    
-    // Initial parameter setup
-    updateParams();
+  // Define parameters for each formula
+  const formulaParams = {
+    SUM: [
+      { name: "number1", type: "number", default: 1 },
+      { name: "number2", type: "number", default: 2 },
+      { name: "number3", type: "number", default: 3 }
+    ],
+    AVERAGE: [
+      { name: "number1", type: "number", default: 1 },
+      { name: "number2", type: "number", default: 2 },
+      { name: "number3", type: "number", default: 3 }
+    ],
+    MAX: [
+      { name: "number1", type: "number", default: 1 },
+      { name: "number2", type: "number", default: 2 },
+      { name: "number3", type: "number", default: 3 }
+    ],
+    MIN: [
+      { name: "number1", type: "number", default: 1 },
+      { name: "number2", type: "number", default: 2 },
+      { name: "number3", type: "number", default: 3 }
+    ],
+    PMT: [
+      { name: "rate", type: "number", default: 0.05 },
+      { name: "nper", type: "number", default: 36 },
+      { name: "pv", type: "number", default: 10000 }
+    ],
+    FV: [
+      { name: "rate", type: "number", default: 0.05 },
+      { name: "nper", type: "number", default: 10 },
+      { name: "pmt", type: "number", default: -100 },
+      { name: "pv", type: "number", default: -1000 }
+    ],
+    NPV: [
+      { name: "rate", type: "number", default: 0.1 },
+      { name: "value1", type: "number", default: -10000 },
+      { name: "value2", type: "number", default: 3000 },
+      { name: "value3", type: "number", default: 4200 },
+      { name: "value4", type: "number", default: 6800 }
+    ],
+    IRR: [
+      { name: "values", type: "array", default: "[-100, 39, 59, 55, 20]" }
+    ],
+    VLOOKUP: [
+      { name: "lookup_value", type: "number", default: 40 },
+      { name: "table_array", type: "array", default: "[[10, 'A'], [20, 'B'], [30, 'C'], [40, 'D'], [50, 'E']]" },
+      { name: "col_index_num", type: "number", default: 2 },
+      { name: "range_lookup", type: "boolean", default: false }
+    ],
+    REGEXEXTRACT: [
+      { name: "text", type: "string", default: "Extract 42 from this text" },
+      { name: "regular_expression", type: "string", default: "\\d+" }
+    ],
+    REGEXMATCH: [
+      { name: "text", type: "string", default: "Does this text contain numbers like 123?" },
+      { name: "regular_expression", type: "string", default: "\\d+" }
+    ],
+    REGEXREPLACE: [
+      { name: "text", type: "string", default: "Replace all numbers like 42 and 123 in this text" },
+      { name: "regular_expression", type: "string", default: "\\d+" },
+      { name: "replacement", type: "string", default: "[number]" }
+    ]
+  };
+  
+  // Update parameters when formula changes
+  formulaSelect.addEventListener("change", updateParams);
+  
+  // Initial parameter setup
+  updateParams();
+  
+  // Calculate result when button is clicked
+  calculateBtn.addEventListener("click", calculateResult);
+  
+  function updateParams() {
+    const selectedFormula = formulaSelect.value;
+    const params = formulaParams[selectedFormula];
     
-    // Calculate result when button is clicked
-    calculateBtn.addEventListener("click", calculateResult);
+    // Clear existing parameters
+    paramsContainer.innerHTML = "";
     
-    function updateParams() {
-      const selectedFormula = formulaSelect.value;
-      const params = formulaParams[selectedFormula];
+    // Add parameter inputs
+    params.forEach(param => {
+      const paramContainer = document.createElement("div");
+      paramContainer.className = "param-container";
       
-      // Clear existing parameters
-      paramsContainer.innerHTML = "";
+      const label = document.createElement("label");
+      label.className = "param-label";
+      label.textContent = param.name;
       
-      // Add parameter inputs
-      params.forEach(param => {
-        const paramContainer = document.createElement("div");
-        paramContainer.className = "param-container";
-        
-        const label = document.createElement("label");
-        label.className = "param-label";
-        label.textContent = param.name;
-        
-        const input = document.createElement("input");
-        input.type = "text";
-        input.id = `param-${param.name}`;
-        input.value = param.default;
-        
-        paramContainer.appendChild(label);
-        paramContainer.appendChild(input);
-        paramsContainer.appendChild(paramContainer);
-      });
-    }
+      const input = document.createElement("input");
+      input.type = "text";
+      input.id = `param-${param.name}`;
+      input.value = param.default;
+      
+      paramContainer.appendChild(label);
+      paramContainer.appendChild(input);
+      paramsContainer.appendChild(paramContainer);
+    });
+  }
+  
+  function calculateResult() {
+    const selectedFormula = formulaSelect.value;
+    const params = formulaParams[selectedFormula];
     
-    function calculateResult() {
-      const selectedFormula = formulaSelect.value;
-      const params = formulaParams[selectedFormula];
+    // Get parameter values
+    const paramValues = params.map(param => {
+      const value = document.getElementById(`param-${param.name}`).value;
       
-      // Get parameter values
-      const paramValues = params.map(param => {
-        const value = document.getElementById(`param-${param.name}`).value;
-        
-        if (param.type === "array") {
-          try {
-            return JSON.parse(value);
-          } catch (e) {
-            return value;
-          }
-        } else if (param.type === "number") {
-          return parseFloat(value);
-        } else if (param.type === "boolean") {
-          return value.toLowerCase() === "true";
+      if (param.type === "array") {
+        try {
+          return JSON.parse(value);
+        } catch (e) {
+          return value;
         }
-        
-        return value;
-      });
+      } else if (param.type === "number") {
+        return parseFloat(value);
+      } else if (param.type === "boolean") {
+        return value.toLowerCase() === "true";
+      }
       
-      try {
-        let result;
-        
-        // FormulaJS has changed its export structure in newer versions
-        // First try window.formulajs (older versions)
-        if (window.formulajs && typeof window.formulajs[selectedFormula] === 'function') {
-          result = window.formulajs[selectedFormula](...paramValues);
-        } 
-        // Then try window.Formula (newer versions)
-        else if (window.Formula && typeof window.Formula[selectedFormula] === 'function') {
-          result = window.Formula[selectedFormula](...paramValues);
-        }
-        // Custom implementation for regex functions if not available
-        else if (selectedFormula === 'REGEXEXTRACT') {
-          const [text, pattern] = paramValues;
-          const regex = new RegExp(pattern);
-          const match = text.match(regex);
-          result = match ? match[0] : null;
-        }
-        else if (selectedFormula === 'REGEXMATCH') {
-          const [text, pattern] = paramValues;
-          const regex = new RegExp(pattern);
-          result = regex.test(text);
-        }
-        else {
-          throw new Error(`Function ${selectedFormula} not found in FormulaJS`);
-        }
-        
-        // Display result
-        resultDiv.textContent = result !== undefined ? result : "undefined";
-        
-        // Show the code
-        const formulaNamespace = window.formulajs ? "formulajs" : "Formula";
-        formulaCodeDiv.textContent = `${formulaNamespace}.${selectedFormula}(${paramValues.map(v => 
-          typeof v === 'object' ? JSON.stringify(v) : 
-          typeof v === 'string' ? `"${v}"` : v
-        ).join(", ")}) = ${result}`;
-      } catch (error) {
-        resultDiv.textContent = "Error";
-        formulaCodeDiv.textContent = error.message;
+      return value;
+    });
+    
+    try {
+      let result;
+      
+      // FormulaJS has changed its export structure in newer versions
+      // First try window.formulajs (older versions)
+      if (window.formulajs && typeof window.formulajs[selectedFormula] === 'function') {
+        result = window.formulajs[selectedFormula](...paramValues);
+      } 
+      // Then try window.Formula (newer versions)
+      else if (window.Formula && typeof window.Formula[selectedFormula] === 'function') {
+        result = window.Formula[selectedFormula](...paramValues);
+      }
+      // Custom implementation for regex functions if not available
+      else if (selectedFormula === 'REGEXEXTRACT') {
+        const [text, pattern] = paramValues;
+        const regex = new RegExp(pattern);
+        const match = text.match(regex);
+        result = match ? match[0] : null;
       }
+      else if (selectedFormula === 'REGEXMATCH') {
+        const [text, pattern] = paramValues;
+        const regex = new RegExp(pattern);
+        result = regex.test(text);
+      }
+      else {
+        throw new Error(`Function ${selectedFormula} not found in FormulaJS`);
+      }
+      
+      // Display result
+      resultDiv.textContent = result !== undefined ? result : "undefined";
+      
+      // Show the code
+      const formulaNamespace = window.formulajs ? "formulajs" : "Formula";
+      formulaCodeDiv.textContent = `${formulaNamespace}.${selectedFormula}(${paramValues.map(v => 
+        typeof v === 'object' ? JSON.stringify(v) : 
+        typeof v === 'string' ? `"${v}"` : v
+      ).join(", ")}) = ${result}`;
+    } catch (error) {
+      resultDiv.textContent = "Error";
+      formulaCodeDiv.textContent = error.message;
     }
-  });
-  
-  // Export any functions you want to make available to other modules
-  // This is optional and not needed for this playground
-  export const version = "1.0.0";
+  }
+});
+
+// Export any functions you want to make available to other modules
+// This is optional and not needed for this playground
+export const version = "1.0.0";