Extracting Characters from a String

Question

I need to parse HTML files and extract any characters found within the following flag:

${message}

The message may contain words, whitespace, and even special characters. I have the following regex that seems to partially work:

/\$\{(.+)\}/g

What's happening with this pattern is it appears to be working backwards from the line break and finding the first }. The desired result would be to work forward and find the first }.

Here is the regex in RegExr: https://regexr.com/3ng3d

I have the following test case:

<div>
  <div class="panel-heading">
    <h2 class="panel-title">${Current Status}<span> - {{data.serviceDisplay}}</span></h2>
  </div>
  ${test}
  <div class="panel-body">
    <div>${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>
    <div>
      <div>${No system is reporting an issue}</div>
    </div>
    <div>
      <a>{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})
        <div></div>
      </a>
    </div>
    <div><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}
     </a></div>
  </div>
</div>

The regex should extract the following:

Current Status
test
We constantly monitor our services and their related components.
If there is ever a service interruption, a notification will be posted to this page.
If you are experiencing problems not listed on this page, you can submit a request for service.
No system is reporting an issue
started {{outage.begin}}
More information, open current status page
More information...

But what I'm actually getting is...

${Current Status} - {{data.serviceDisplay}}
${test}
${We constantly monitor our services and their related components.} ${If 4. there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}
${No system is reporting an issue}
${started {{outage.begin}}}
${More information, open current status page}">${More information...}

It appears my regex is working back from the \n and finding the first } which is what's giving me #1, #3, and #6.

How can I work from the start and find the first } as opposed to working backwards from the line break?

/\$\{(.+?)\}/g should give you closer to what you want (you need lazy matching instead of greedy), but it still has issues with #7. — Herohtar
– Herohtar, Commented Apr 6, 2018 at 17:58

Ori Drori · Accepted Answer · 2018-04-06 18:40:27Z

2

Use RegExp.exec() to iterate the text and extract the capture group.

The pattern is /\$\{(.+?)\}(?=[^}]+?(?:{|$))/g - lazy matching of characters until closing curly bracket that is followed by a sequence that ends with opening curly brackets or end of string.

RegExr demo

var pattern = /\$\{(.+?)\}(?=[^}]+?(?:{|$))/g;
var text = '<div>\
  <div class="panel-heading">\
    <h1>${Text {{variable}} more text}</h1>\
    <h2 class="panel-title">${Current Status}<span> - {{data.serviceDisplay}}</span></h2>\
  </div>\
  ${test}\
  <div class="panel-body">\
    <div>${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>\
    <div>\
      <div>${No system is reporting an issue}</div>\
    </div>\
    <div>\
      <a>{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})\
        <div></div>\
      </a>\
    </div>\
    <div><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}\
     </a></div>\
  </div>\
</div>';

var result = [];
var temp;
while(temp = pattern.exec(text)) {
  result.push(temp[1]);
}

console.log(result);

edited Apr 6, 2018 at 18:40

answered Apr 6, 2018 at 18:12

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

1 Comment

Ori Drori Over a year ago

See updated answer. Added an example for ${Text {{variable}} more text} (the h1).

Collectives™ on Stack Overflow

Extracting Characters from a String

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related