Question 213389 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Multiline regex with captures for global search and replace

I’m trying to replace code in this format

{{>
    default-hero
    color="red"
    title="Foo"
    subheading="Bar"
    background="about-us-hero-desktop.jpg"
    squarePartial="company/square.hbs"
    squareBaseline=true
}}

with this

{% set color = "red" %}
{% set heroTitle = "Foo" %}
{% set subheading = "Bar" %}
{% set background = "about-us-hero-desktop.jpg" %}
{% set squarePartial = "company/square.njk" %}
{% set squareBaseline = true %}

{% include "default-hero.njk" %}

This would run recursively against many files. Is this possible? I started writing code like this

  oldContent = newContent;
  regex = /{{>s*([a-zA-Z0-9-_/]+)?s*([a-zA-Z0-9-_/.=:"'s]+)s*}}/gi;
  replaceVal = '{% include $1.njk $2 %}';
  newContent = oldContent.replace(regex, replaceVal);

but it only works partially.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. Thanks for everyone's help though.

    regex = /{{>s*([a-zA-Z0-9-_/]+)?s*([a-zA-Z0-9-_/.=:"'s]+)s*}}/gi;
var arr = regex.exec(input);
var statements = "";
if (arr && arr[2]) {
  var statementsArray = arr[2].split(/s+/gi);
  statementsArray = statementsArray.filter(n => n); // filter out falsey values
  statements = statementsArray.map(function (statement) {
    return `{% set ${statement} %}`;
  });
  statements = statements.join("n");
}
replaceVal = statements + "n" + '{% include $1.njk %}';
output = input.replace(regex, replaceVal);

  2. 0

    Not sure this can achieve entirely from Regex only. As far as my understanding you need the string replace in javascript for this to some extent.

    Refer the code below:

    function transformTemplate(input) {

  input = input.replace(/ns+/g, ''); // sanitizing for new lines and space

  
  let color = input.match(/color="(.*?)"/)[1]; // regex to capture color
  let title = input.match(/title="(.*?)"/)[1]; // regex to match Title
  let subheading = input.match(/subheading="(.*?)"/)[1]; // regex to match subheading
  let background = input.match(/background="(.*?)"/)[1]; // regex to match background
  let squarePartial = input.match(/squarePartial="(.*?)"/)[1]; // regex to squarePartial
  let squareBaseline = input.includes('squareBaseline=true'); // check to see if squareBaseline


  let transformedOutput = `
  {% set color = "${color}" %}
  {% set heroTitle = "${title}" %}
  {% set subheading = "${subheading}" %}
  {% set background = "${background}" %}
  {% set squarePartial = "${squarePartial.replace('.hbs', '.njk')}" %}
  {% set squareBaseline = ${squareBaseline} %}

  {% include "default-hero.njk" %}`;

  return transformedOutput;
}


const sampleInputTemplate = `{{>
    default-hero
    color="red"
    title="Foo"
    subheading="Bar"
    background="about-us-hero-desktop.jpg"
    squarePartial="company/square.hbs"
    squareBaseline=true
    }}`;


console.log(transformTemplate(sampleInputTemplate));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search