Sublime Text: complicated regex - search and replace

Question

I wanted to do a quick test and see if <span ng-bind="test.id"></span> would be better than using {{test.id}} for data-binding. Would there by a way I could do this in regex for the whole app?

I'd have to make sure that it doesn't replace variables that are inside of a tag like <div id="chat-{{otherPerson.id}}" ...> , so it would only be replacing things like <div class="message">{{message.body}}</div> .

I'd also need to be able to check if there was a filter being used: {{ otherPerson | fullname}} {{ otherPerson | fullname}}

Is this even possible with regex, or would I need to write a grunt task to take care of it?

Answer 1

I believe you should be able to use this type of regex

/([^'"])\{\{([^\}|]+)\}\}/gi

1. match 1 = anything that doesn't start with a single or double quote
2. then has two open curly braces
3. match 2 = anything (if it's got one or more chars) inside those braces up till that's not a pipe or close curly brace
4. then has two closing curlies
5. global and case-insensitive searching flags

and replace with

'$1<span ng-bind="$2"></span>'

Hope it helps!

Answer 2

I think you can use this regex:

/(^|(>[^\<]*)|(^[^\<]*))(\{\{[^\{\}]*\}\})/igm

and use its substitution $4 .

Answer 3

If I got you correctly, you want to replace

>\s*\{\{([^|}<]+)\}\}

with

 ng-bind="\1">

Note that the replacement has space in front.

For the filter case you can replace

>\s*\{\{([^|}<]+\|[^|}<]+)\}\}

with

 ng-bind="(\1)">

Answer 4

You could try multiple pass approach

1. Search regex "(.*)\\{\\{([^\\|]+?)\\}\\}(.*)" replace with "$1[[[$2]]]$3"
2. Search regex \\{\\{\\s*([^\\|]+?)\\s*\\}\\} replace it with <span data-bind="$1"></span>
3. Search regex \\[\\[\\[ replace with {{
4. Search regex \\]\\]\\] replace with }}