1

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

2 Answers 2

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,'')+' ')
    })
  }

enter image description here

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,'') + ' ')
Sign up to request clarification or add additional context in comments.

21 Comments

is it possible to add another condition in match like { and } (or) {{ }} because even words with {{}} is showing as {
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/…
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.
In my previous comment I have shared working stackblitz with my issue can you check that
In the previous comment stackblitz it is taking first occurrence only which solves with the regex with /gi options. Is there any other issue?
|
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.

2 Comments

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/…
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.