How to create/parse a data-structure from attribute names and values of a custom syntax markup-code?

const markup = `
<@if VERSION = "A1" || VERSION = "A3">

<@assign CTA = "blue">
<@assign CTA2 = "green">

<@elseif VERSION = "A2">

<@assign CTA = "red">
<@assign CTA2 = "yellow">
<@assign CTA3 = "brown">

</@if>`;

const parsableMarkup = createParsableMarkup(markup);
const versionData = parseVersionData(parsableMarkup);

document.querySelector('textarea').value = parsableMarkup;
console.log(versionData);

body { margin: 0; }
.as-console-wrapper { left: auto!important; top: 0; width: 50%; min-height: 100%!important; }

<script>
function createParsableMarkup(markup) {
  return markup

    // see ... [https://regex101.com/r/rxpfho/1]
    .replace(/(<\/?)@(?=if|elseif|assign)/g, '$1')

    // see ... [https://regex101.com/r/rxpfho/2]
    .replace(/<assign.*?>/g, '$&</assign>')

    // see ... [https://regex101.com/r/rxpfho/3]
    .replace(
      /version\s*=\s*"([^"]+)"(?:\s*\|\|)?/gi,
      (match, capture, idx) => `version-${ idx }="${ capture }"`
    )
    .trim();
}

function aggregateAssignmentData(result, assignmentNode) {
  return assignmentNode
    .getAttributeNames()
    .reduce((data, name) => ({

      ...data,
      [ name.toUpperCase() ]: assignmentNode.getAttribute(name),

    }), result);
}

function parseVersionData(markup) {
  const htmlDoc = (new DOMParser)
    .parseFromString(markup, 'text/html');

  return {
    VERSION: [
      ...htmlDoc.querySelectorAll('if, elseif')
    ]
    .reduce((result, versionNode) => {

      const assignmentData = [
        ...versionNode.querySelectorAll(':scope > assign')
      ]
      .reduce(aggregateAssignmentData, {})

      versionNode
        .getAttributeNames()
        .filter(name => name.startsWith('version-'))
        .reduce((versionData, versionKey) => {

          const versionName = versionNode.getAttribute(versionKey);

          // - create the version specific data-entry.
          // - since different versions can initially
          //   share one and the same configuration,
          //   assign a copy of the before created
          //   assignment-data to each such version.
          versionData[versionName] = { ...assignmentData };

          return versionData;          

        }, result);

      return result;        

    }, {}),
  };
}
</script>

<textarea cols="34" rows="12"></textarea>

const markup = `<@if VERSION = "A1" || VERSION = "A3">

<@assign CTA = "blue">
<@assign CTA2 = "green">
<@assign TEXT1 = "Hello<br/>World">

<@elseif VERSION = "A2">

<@assign CTA = "red">
<@assign CTA2 = "yellow">
<@assign CTA3 = "brown">
<@assign TEXT1 = "Click <a href='https://example.com' 
style='text-decoration:none;color:#000000;'>here</a>">

</@if>

// condition 2
<@if VERSION = "A4" || VERSION = "A5">

<@assign CTA = "purple">
<@assign CTA2 = "orange">
<@assign TEXT1 = "Hi <span style='font- 
weight:bold;'>John</span>">

</@if>

// condition 3
<@if LANG = "en_US">

<@assign TITLE = "English">

</@if>`;

const parsableHtmlMarkup = createParsableHtmlMarkup(markup);
const attributeData = parseAttributeData(parsableHtmlMarkup);

document.querySelector('textarea').value = parsableHtmlMarkup;
console.log(attributeData);

body { margin: 0; }
textarea { position: relative; z-index: 1; background-color: #eee; }
.as-console-row-code { background-color: #ddd; }
.as-console-wrapper { left: auto!important; top: 0; width: 41%; min-height: 100%!important; }

<script>
function createParsableHtmlMarkup(markup) {
  return markup

    // see ... [https://regex101.com/r/gI0egU/1]
    .replace(
      /(?<name>[\p{L}\p{N}_-]+)\s*=\s*"(?<value>.*?)(?<!\\)"/gus,
      (match, name, value) =>
        `${ name }="${ encodeURI(value.replace(/\n+/, '')) }"`
    )
    // see ... [https://regex101.com/r/gI0egU/2]
    .replace(/(<\/?)@(?=if|elseif|assign)/g, '$1')

    // see ... [https://regex101.com/r/gI0egU/3]
    .replace(/<assign.*?>/g, '$&</assign>')

    // see ... [https://regex101.com/r/gI0egU/5]
    .replace(
      /(?:(if\s+)|\|\|\s*)(?<attrName>[\p{L}\p{N}_-]+)(?==")/gu,
      (match, $1, attrName, idx) => `${ $1 ?? '' } ${ attrName }-${ idx }`
    )
    .trim();
}

function aggregateAssignmentData(result, assignmentNode) {
  return assignmentNode
    .getAttributeNames()
    .reduce((data, name) => ({

      ...data,
      [ name.toUpperCase() ]: decodeURI(assignmentNode.getAttribute(name)),

    }), result);
}

function parseAttributeData(markup) {
  const htmlDoc = (new DOMParser)
    .parseFromString(markup, 'text/html');

  // see ... [https://regex101.com/r/gI0egU/6]
  const regXInitialAttrName = /^([\p{L}\p{N}_-]+)-\d+$/u;

  return [
    ...htmlDoc.querySelectorAll('if, elseif')
  ]
  .reduce((result, conditionalNode) => {

    const assignmentData = [
      ...conditionalNode.querySelectorAll(':scope > assign')
    ]
    .reduce(aggregateAssignmentData, {})

    conditionalNode
      .getAttributeNames()
      .filter(attrName => regXInitialAttrName.test(attrName))
      .reduce((attrData, attrName) => {

        const initialAttrName =
          (regXInitialAttrName.exec(attrName)?.at(1) ?? attrName).toUpperCase();

        const assignmentGroup = (attrData[initialAttrName] ??= {});

        const key = conditionalNode.getAttribute(attrName);

        // - create the attribute specific data-entry.
        // - since different conditional attribute entries
        //   can initially share one and the same configuration,
        //   assign a copy of the before created assignment-data
        //   to each such data-entry.
        assignmentGroup[key] = { ...assignmentData };

        return attrData;          

      }, result);

    return result;        

  }, {});
}
</script>

<textarea cols="43" rows="12"></textarea>