Using Laravel for Advanced String Manipulation in PHP/

...

/

Parsing Single-File Components

Parsing Single-File Components

Learn how to implement a single-file component parser.

We'll cover the following...

In this section, we will work through another example that utilizes regular expressions to help extract information from input strings. We will be working to construct a simple parser to split a single-file component document, similar to those used by front-end tools like Vue.js. The snippet below contains the sample document we will work with throughout this section:

Press + to interact
<style>
    .hero {
    }
</style>
<template>
    <div class="hero">
    </div>
</template>
<script>
    var heroElements = document.getElementsByClassName('hero');
</script>

Our approach to splitting the document into its individual components will be to use a regular expression to locate the start of all HTML tags we are interested in; in our example, those are the style, template, and script tag pairs. Once we have the locations of these tags, we will extract substrings from the original document and return the results.

Implementation of the preg_match_all function

Before looking at the implementation, let’s first take a look at the results of calling PHP’s preg_match_all function on our sample input like so:

Press + to interact
<?php
$code = <<<CODE
<style>
    .hero {
    }
</style>
CODE;
preg_match_all(
  '/^<[\/]?(style|template|script).*>/m',
  $code,
  $matches,
  PREG_OFFSET_CAPTURE
);

This would produce the following output:

Array
(
    [0] => Array
        (
            [0] => Array
                (
                    [0] => 
                    [1] => 27
                )

        )

    [1] => Array
        (
...