What is the best way to find a match for {0} while still allowing for proper

Question

What is the best way to find a match for {0} while still allowing for proper

I am working on developing a text templating system that allows for defining placeholders using {0}, similar to the functionality of .Net's string.format method.

Here is an example of what I am aiming for:

      format("{0}", 42), // output `42`
      format("{0} {1}", 42, "bar"), // output `42 bar`
      format("{1} {1}", 42, "bar"), // output `bar bar` ({0} ignored)
      format("{{0", 42), // output `{0` (`{{` is an escaped `{`)
      format("{{{0}", 42), // output `{42` : an escaped brace and the formatted value
      format("Mix {{0}} and {0}", 42), // outputs `Mix {0} and 42`
      format("Invalid closing brace }"), // should fail, since the closing brace does close an opening one
      format("Invalid placeholder {z}"), // should fail, not an integer
      format("{0}", "With { in value"), // output `With { in value`, inner { should be broke the format

I am experimenting with regex and backtracking to handle the escaped braces.

 function format(template: string, ...values: unknown[]): string {
      const regex = /(?!({{)+){(\d+)}(?<!(}}))/gm;
      return template.replace(regex, ([, index]) => {
        const valueIndex = parseInt(index, 10);
        if (valueIndex >= values.length) throw new Error("Not enough arguments")
        return String(values[valueIndex]);

      });
    }

    console.log([
      format("{0}", 42), // output `42`
      format("{0} {1}", 42, "bar"), // output `42 bar`
      format("{1} {1}", 42, "bar"), // output `bar bar` ({0} ignored)
      format("{{0", 42), // output `{0` (`{{` is an escaped `{`)
      format("{{{0}", 42), // output `{42` : an escaped brace and the formatted value
      format("Mix {{0}} and {0}", 42), // outputs `Mix {0} and 42`
      format("Invalid closing brace }"), // should fail, since the closing brace does not close an opening one
      format("Invalid placeholder {z}"), // should fail, not an integer
      format("{0}", "With { in value"), // output `With { in value`, inner { should be broke the format
    ]);

    try {
      format("{0} {1}", 42); // throw error because not enough argument are passed
    } catch (e) {
      console.log(e.message);
    }

Despite my efforts, I am struggling to properly replace the escaped braces with a single brace.

How can I resolve this issue?

javascript regex typescript

Answer 1

Answer №1

In my recommendation, it is best to replace the double braces within the same replace call. To handle any potential "syntax" errors, it would be wise to throw a syntax error if only a single brace is left over after replacing pairs and cannot be combined with a placeholder:

function modifyString(text, ...values) {
  const regex = /{(\d+)}|([{}])(\2?)/g;
  return text.replace(regex, (_, index, brace, escaped) => {
    if (escaped) return brace;
    if (brace) throw new Error("Unescaped literal brace");
    if (+index >= values.length) throw new Error("Insufficient arguments provided");
    return values[+index];
  });
}


const testCases = [
  ["{0}", 42], // outcome: `42`
  ["{0} {1}", 42, "bar"], // outcome: `42 bar`
  ["{1} {1}", 42, "bar"], // outcome: `bar bar` ({0} is ignored)
  ["{{0", 42], // outcome: `{0` (`{{` is an escaped `{`)
  ["{{{0}", 42], // outcome: `{42` : escaped brace and the formatted value
  ["Mix {{0}} and {0}", 42], // outcome: `Mix {0} and 42`
  ["Invalid closing brace }"], // should fail, as the closing brace does not match an opening one
  ["Invalid placeholder {z}"], // should fail, as it is not an integer
  ["{0}", "With { in value"], // outcome: `With { in value`, inner { should break the format
  ["{0} {1}", 42], // should throw an error due to insufficient arguments
];

for (const [test, ...args] of testCases) {
  try {
    console.log(modifyString(test, ...args));
  } catch (e) {
    console.log("Error:", e.message);
  }
}

There is no necessity for look-around assertions since there is no risk of these paired braces getting chunked up incorrectly during backtracking.

The \2 backreference indicates that a double of the brace was matched, signifying an escaped brace ({ or }). The ? is greedy, but if there is no duplicate brace, we capture a single brace that violates the syntax.

Answer 2

In my recommendation, it is best to replace the double braces within the same replace call. To handle any potential "syntax" errors, it would be wise to throw a syntax error if only a single brace is left over after replacing pairs and cannot be combined with a placeholder:

function modifyString(text, ...values) {
  const regex = /{(\d+)}|([{}])(\2?)/g;
  return text.replace(regex, (_, index, brace, escaped) => {
    if (escaped) return brace;
    if (brace) throw new Error("Unescaped literal brace");
    if (+index >= values.length) throw new Error("Insufficient arguments provided");
    return values[+index];
  });
}


const testCases = [
  ["{0}", 42], // outcome: `42`
  ["{0} {1}", 42, "bar"], // outcome: `42 bar`
  ["{1} {1}", 42, "bar"], // outcome: `bar bar` ({0} is ignored)
  ["{{0", 42], // outcome: `{0` (`{{` is an escaped `{`)
  ["{{{0}", 42], // outcome: `{42` : escaped brace and the formatted value
  ["Mix {{0}} and {0}", 42], // outcome: `Mix {0} and 42`
  ["Invalid closing brace }"], // should fail, as the closing brace does not match an opening one
  ["Invalid placeholder {z}"], // should fail, as it is not an integer
  ["{0}", "With { in value"], // outcome: `With { in value`, inner { should break the format
  ["{0} {1}", 42], // should throw an error due to insufficient arguments
];

for (const [test, ...args] of testCases) {
  try {
    console.log(modifyString(test, ...args));
  } catch (e) {
    console.log("Error:", e.message);
  }
}

There is no necessity for look-around assertions since there is no risk of these paired braces getting chunked up incorrectly during backtracking.

The \2 backreference indicates that a double of the brace was matched, signifying an escaped brace ({ or }). The ? is greedy, but if there is no duplicate brace, we capture a single brace that violates the syntax.

Answer 3

Answer №2

To utilize this regex pattern:

(?<=(?<!\{)(?:\{\{)*)\{\d+}(?!(?:}})*}(?!}))

Check out the regex demonstration.

Key Points:

(?<=(?<!\{)(?:\{\{)*)\{ - identifies a non-escaped { character (no { followed by zero or more double { characters)
\d+
}(?!(?:}})*}(?!})) - pinpoints a non-escaped } character (no } preceded by zero or more double } characters)

The section

.replaceAll('{{','{').replaceAll('}}','}')

completes the transformation process.

Examine the JS demonstration:

function format(template, ...values) {
  const regex = /(?<=(?<!\{)(?:\{\{)*)\{\d+}(?!(?:}})*}(?!}))/g;
  return template.replace(regex, ([, index]) => {
    const valueIndex = parseInt(index, 10);
    if (valueIndex >= values.length) throw new Error("Not enough arguments")
    return String(values[valueIndex]).replaceAll('{{','{').replaceAll('}}','}');

  });
}

console.log([
  format("{0}", 42), // output `42`
  format("{0} {1}", 42, "bar"), // output `42 bar`
  format("{1} {1}", 42, "bar"), // output `bar bar` ({0} ignored)
  format("{{0", 42), // output `{0` (`{{` is an escaped `{`)
  format("{{{0}", 42), // output `{42` : an escaped brace and the formatted value
  format("Mix {{0}} and {0}", 42), // outputs `Mix {0} and 42`
]);

try {
  format("{0} {1}", 42); // throws an error because not enough arguments are provided
} catch (e) {
  console.error(e);
}

IMPORTANT: Make sure to "prep" the passed values by escaping the braces, i.e. use

value.replaceAll('{','{{').replaceAll('}','}}')

.

Answer 4

To utilize this regex pattern:

(?<=(?<!\{)(?:\{\{)*)\{\d+}(?!(?:}})*}(?!}))

Check out the regex demonstration.

Key Points:

(?<=(?<!\{)(?:\{\{)*)\{ - identifies a non-escaped { character (no { followed by zero or more double { characters)
\d+
}(?!(?:}})*}(?!})) - pinpoints a non-escaped } character (no } preceded by zero or more double } characters)

The section

.replaceAll('{{','{').replaceAll('}}','}')

completes the transformation process.

Examine the JS demonstration:

function format(template, ...values) {
  const regex = /(?<=(?<!\{)(?:\{\{)*)\{\d+}(?!(?:}})*}(?!}))/g;
  return template.replace(regex, ([, index]) => {
    const valueIndex = parseInt(index, 10);
    if (valueIndex >= values.length) throw new Error("Not enough arguments")
    return String(values[valueIndex]).replaceAll('{{','{').replaceAll('}}','}');

  });
}

console.log([
  format("{0}", 42), // output `42`
  format("{0} {1}", 42, "bar"), // output `42 bar`
  format("{1} {1}", 42, "bar"), // output `bar bar` ({0} ignored)
  format("{{0", 42), // output `{0` (`{{` is an escaped `{`)
  format("{{{0}", 42), // output `{42` : an escaped brace and the formatted value
  format("Mix {{0}} and {0}", 42), // outputs `Mix {0} and 42`
]);

try {
  format("{0} {1}", 42); // throws an error because not enough arguments are provided
} catch (e) {
  console.error(e);
}

IMPORTANT: Make sure to "prep" the passed values by escaping the braces, i.e. use

value.replaceAll('{','{{').replaceAll('}','}}')

.

What is the best way to find a match for {0} while still allowing for proper

Answer №1

Answer №2

Similar questions

Retrieve variables from an external JavaScript file

Creating a conditional class property requirement in TypeScriptAnother way to implement conditionally required class

I am looking to avoid showing duplicate items in the rendering process and instead display the number of duplicates in the item_number column, but unfortunately the map functionality does not support this

Issue with locating JavaScript controller in Angular HTML file [Node.js/Angular]

Pressing "Enter" initiates the submission of the form

Can you explain the distinction between using src/**/* and 'src/**/*'?

By default, the HTML table will highlight the specific column based on the current month using either AngularJS or JavaScript upon loading

Exploring point clouds with three.js and NSF OpenTopography data: What's the best way to configure the camera and implement a controls library for seamless data navigation?

difficulty with parsing JSON in jQuery when referencing an external file containing the same data

In the realm of JavaScript, removing a DOM element can sometimes feel like an

Instructions for downloading a file using Front End technology in Java and HTML

Transform the Standard class into a generic one in typescript

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

PHP Ajax login form to instantly authenticate without redirecting to a new page

having difficulty placing 3 pop-up windows on a single page

The ideal version of firebase for showing messages in the foreground

Tips for arranging datasets in React Chart.js 2 to create stacked bar charts

Discord bot struggling to reach every user in the server

Error occurs during server to server mutation with Apollo Client (query successful)

Can PHP be used to create a new page whenever Javascript history.go(-1) is triggered?