Dynamically splitting strings with multiple keywords

Question

I'm working on headless CMS using Angular.

In the content below, whatever is wrapped inside {{ }} is considered to be an anchor link.

We processes your data in accordance with the {{policy_placeholder}}. You have the right to object to the processing of your personal data. Check “Your rights” in the {{policy_placeholder}} and {{term_policy}} for more information.;`

So with the above example, below is the expected result

[
  {
    type: "TEXT",
    content: "We processes your data in accordance with the "
  },
  {
    type: "LINK",
    content: "{{policy_placeholder}}"
  },
  {
    type: "TEXT",
    content:
      ". You have the right to object to the processing of your personal data. Check “Your rights” in the "
  },
  {
    type: "LINK",
    content: "{{policy_placeholder}}"
  },
  {
    type: "TEXT",
    content: " and "
  },
  {
    type: "LINK",
    content: "{{terms_placeholder}}"
  },

  {
    type: "TEXT",
    content: " for more information."
  }
];

Below is what I tried

splitString = function(string, splitters) {
    var list = [string];
    for(var i=0, len=splitters.length; i<len; i++) {
        traverseList(list, splitters[i], 0);
    }
    const x = flatten(list);
    console.log(x);
    return flatten(list);
}

traverseList = function(list, splitter, index) {
    if(list[index]) {
        if((list.constructor !== String) && (list[index].constructor === String))
            (list[index] != list[index].split(splitter)) ? list[index] = list[index].split(splitter) : null;
        (list[index].constructor === Array) ? traverseList(list[index], splitter, 0) : null;
        (list.constructor === Array) ? traverseList(list, splitter, index+1) : null;    
    }
}

flatten = function(arr) {
    return arr.reduce(function(acc, val) {
        return acc.concat(val.constructor === Array ? flatten(val) : val);
    },[]);
}

var splitList = ["{{policy_placeholder}}", "{{term_policy}}"];
splitString(source, splitList);

The issue is that I've to manually add the splitList, but i want to make it dynamic based on {{ }}

How can this be done?

Please explain your algorithm. I don't understand it. Why do you split splitBy into single characters? Why do you concatenate the characters with the text? — Thomas Sablik
– Thomas Sablik, Commented Nov 4, 2020 at 14:48

GalAbra · Accepted Answer · 2020-11-04 18:03:33Z

1

When you spread a string, you actually split it into characters.

const source = `We processes your data in accordance with the {{policy_placeholder1}}. You have the right to object to the processing of your personal data. Check “Your rights” in the {{policy_placeholder2}} for more information.`;

function splitString(str) {
  const ans = [];

  const linkTokenRegex = /\{\{.+?\}\}/g;
  const textsArr = str.split(linkTokenRegex);
  const linksArr = str.match(linkTokenRegex);

  textsArr.forEach((textPart, index) => {
    ans.push({
      type: "TEXT",
      content: textPart,
    });
    if (linksArr[index]) {
      ans.push({
        type: "LINK",
        content: linksArr[index],
      });
    }
  });
  return ans;
}

console.log(splitString(source));

edited Nov 4, 2020 at 18:03

answered Nov 4, 2020 at 14:53

GalAbra

5,1585 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stack over Over a year ago

but can we use regex, to extract the text {{ }} because der can be multiple links in the same string, with current login it will work with one link

stack over Over a year ago

for eg, {{policy_placeholder}} and {{terms_placeholder}} in the same string

GalAbra Over a year ago

@stackover I've updated my answer. It can be written better, but you can understand from it how to use the regex

Collectives™ on Stack Overflow

Dynamically splitting strings with multiple keywords

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related