Regex: how to match a particular syntax when it doesn't include that particular syntax, single line?

Question

I have a particular syntax I use in strings which helps me retrieve and insert substrings. an example:

{{ variable ||| <div>example text</div>}}

Now I find myself having something like:

{{ variable1 ||| 
    <div>some text</div>
  <ul>
    {{ variable2 |||<li>some other text<li/>}}
    {{ variable3 |||<li>even more text<li/>}}
  </ul>
}}

and obvously the regex I use for the first case does not match correctly.

the regex I usually use is:

/\B\{\{(.*?)\|\|\|(.*?)\}\}/

which in the second example matches:

{{ variable1 ||| 
    <div>some text</div>
  <ul>
    {{ variable2 |||<li>some other text<li/>}}

which is not what I want.

I need a regex to match that particular syntax when it doesn't containt that particular syntax. I've tried many combinations similar to this:

\B\{\{(.*?)\|\|\|(.*(?!\{\{.*?\|\|\|.*?\}\}).*)\}\}

but can't work it out. It would be enough to get only

{{ variable2 |||<li>some other text<li/>}}

Because after the match I can delete that syntax so that recursively checking I can match everything.

The difficulty I have is that the string I parse is only in one line, so I can't use anythng like

^(?!example).*$

Am I right? What am I missing? I couldn't find a solution in other questions so I wrote this; sorry if this is a duplicate.

Thank you very much

score 0 · Accepted Answer · answered Mar 28 '22 at 11:24

The problem you have here is that you are starting to get past what you can usefully* achieve with a regex - the way things are going now, it looks like sooner or later you'll hit on something like:

{{ variable1 ||| 
    <div>some text</div>
  <ul>
    {{ variable2 |||<li>some other text<li/>}}
    {{ variable3 |||<li>even more text 
                        <ul>
                            <li>text always here</li>
                            {{ variable4 ||| <li>optional text</li>}}   
                        </ul>
                     <li/>}}
  </ul>
}}

In this kind of situation you've gone past the point where you have convenient text substitution and you're creating your own mark-up language and templating system. Once you are aware that is what you are doing, it is not too hard, but it's definitely more of a heavyweight task - you will want to parse your text into a tree (Regexes can be very useful for this) and then use your variables to decide which nodes to show.

The thing to think about if you get to this point is whether you are better off using your own mark-up for this, or whether there is an existing tool that can handle what you need already with minimal changes to your existing documents. There are various templating engines available in JavaScript ( I think Moustache and Handlebars are best known, but tools like JSRender might be worth a look ) and it is very possible that something matches your need already.

* When I say usefully what I mean is that beyond a certain point if you can solve a problem with a Regex it tends to become cumbersome and hard to maintain. Regular Expressions are great tools for simple text operations, but if they get too big or complicated it can be very hard to troubleshoot them.

I understand what you mean. In the last few days I've been realizing it. Unfortunately I won't render the text part, the substitution has other goals; Nonetheless the templating engine you suggested are really worth knowing. I think I will modify a little the syntax and go with the tree option. Thank you very much! — Giulio Toldo, Mar 29 '22 at 12:52
I have done that in the past and it worked out pretty well. Remember that if you're in the browser you already have the DOM behaving as a tree, so you can kind of build your parser out on that. — glenatron, Mar 29 '22 at 13:40

Regex: how to match a particular syntax when it doesn't include that particular syntax, single line?

1 Answers1