regex match starts and ends with expression using angular

Question

I have my working example here

https://stackblitz.com/edit/angular-fk2vpr?embed=1&file=src/app/app.component.ts

here I wrote condition like if word starts and ends with { and } they need to highlight and in editable way. here its working fine for word which is having no space like {username} but in case of { host} then its not taking that word to highlight and also if somewords like {pas}!!

then word of {pas} alone needs to highlight but its taking along with that !!

Can anyone assist me what mistake I made on this scenario

Thanks in advance

Pujan Shah · Accepted Answer · 2019-12-12 12:23:52Z

1

Try with below code it will work.

 const editable = data.match(/{+.*?}+/gi);
  if(editable){
    editable.map(word => {
      const re= new RegExp(word,'g');
      data = data.replace(re,' '+ word.replace(/\s/gi,'')+' ')
    })
  }

As per above code the token {username}!! will not work as we are splitting with space. To resolve that problem we can do add extra space before and after of that token. Use below line to work in all condition.

data = data.replace(word, ' ' + word.replace(/\s/g,'') + ' ')

edited Dec 12, 2019 at 12:23

answered Dec 10, 2019 at 13:18

Pujan Shah

84511 silver badges16 bronze badges

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

21 Comments

Kavya Shree Over a year ago

is it possible to add another condition in match like { and } (or) {{ }} because even words with {{}} is showing as {

Kavya Shree Over a year ago

and one more issue, replacement is taking for first occurence alone its not taking for next occurence. reference stackblitz.com/edit/angular-fk2vpr?embed=1&file=src/app/…

Pujan Shah Over a year ago

use this regex /{+.*?}+/gi in the match method. g is for return all the matches not only the first one. Could you share the stackblitz for the first issue as its not clear to me.

Kavya Shree Over a year ago

In my previous comment I have shared working stackblitz with my issue can you check that

Pujan Shah Over a year ago

In the previous comment stackblitz it is taking first occurrence only which solves with the regex with /gi options. Is there any other issue?

|

Maciej B. Nowak · Accepted Answer · 2019-12-10 13:38:22Z

1

The problem lies with mapping the data.split(' '). Notice that when you call that on a string username { username} scrypt secret {password} you will not get an array with 5 elements, as you would like (i.e ['username', '{ username}', 'scrypt', 'secret', '{password}']), but it will split on every space character; so the resulting array looks more like this:

[
  'username',   '',
  '{',          '',
  '',           'username}',
  'scrypt',     'secret',
  '{password}'
]

If you can, I would advice on making the arr array as an array of arrays, each subarray consisting of words you want to launch a regex through. If this is, however, not an option, I would suggest not splitting like that, but mapping like this:

this.mappedArr = this.arr.map(data => {
    const editable = data.match('([{].*?[}])');
    console.log(editable);
    return {
      editable,
      data: !editable ? 
            data :
            data.match(/(\{+ *)?\w+( *\}+)?/g).map(word => ({word, editable: word.match('^[{].*?[}]$')})) <
    };
})

This begs for refactoring though, but it should work as an emergency fix.

edited Dec 10, 2019 at 13:38

answered Dec 10, 2019 at 13:03

Maciej B. Nowak

1,23510 silver badges19 bronze badges

2 Comments

Kavya Shree Over a year ago

Hi david I have tried like this, may i know how can i add another condition for match like { or {{ as well., and in some case if particular element is having multiple words this condition {{ kavya babu }} not applied for few words . which means space between {} then its not considered.stackblitz.com/edit/angular-fk2vpr?embed=1&file=src/app/…

Maciej B. Nowak Over a year ago

Ugh, yes, now I noticed that this method is flawed. I've updated the regex in my answer to take into account many brackets (one after another). Multiple words is, while probably possible, above my abilities. Sorry, I'm no regex expert. Without prior input validation this is a herculean task in my opinion. Check Pujan's answer below, I think it may be more promising.

Collectives™ on Stack Overflow

regex match starts and ends with expression using angular

2 Answers 2

21 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

21 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related