The Original Problem
--------------------

I have a folder of [jsx](https://facebook.github.io/react/docs/jsx-in-depth.html) files with [react-intl](https://github.com/yahoo/react-intl) syntax in them, which looks like this:

```
  ...
  <div>
    <ul>
      <li><FormattedMessage id='some.language.key_1' defaultMessage='Some message 1' /></li>
      <li><FormattedMessage id='some.language.key_2' defaultMessage='Some message 2' /></li>
      <li><FormattedMessage id='some.language.key_3' defaultMessage='Some message 3' /></li>
    </ul>
  </div>
  <div>
    <p>Some other contents</p>
  </div>
  ...

```

I'd like to produce a file with all the `<FormattedMessage>` tags in the folder. The output should look like this:

```
...
<FormattedMessage id='some.language.key_1' defaultMessage='Some message 1' />
<FormattedMessage id='some.language.key_2' defaultMessage='Some message 2' />
<FormattedMessage id='some.language.key_3' defaultMessage='Some message 3' />
...

```

I know I can use this command to get a reasonable result:

```
grep -REho '<FormattedMessage .*\/>' my/target/folder/.

```

My Current Problem
------------------

Things get complicated when some of the actual results look like this:

```
<FormattedMessage id='some.lang.key_1' defaultMessage="Hello {myvar}" values={{ myvar: <FormattedMessage id='some.lang.key_2' defaultMessage='World' /> }} />} />

```

And I would want to produce 2 separate lines for this kind of patterns:

```
<FormattedMessage id='some.lang.key_1' defaultMessage="Hello {myvar}" values={{ myvar: <FormattedMessage id='some.lang.key_2' defaultMessage='World' /> }} />} />
<FormattedMessage id='some.lang.key_2' defaultMessage='World' />

```

Is there anyway I can do this with some Unix command magic?

---

**Update**: A more reasonable example file:

```
<ul>
  <li><FormattedMessage id='lang.key_1' defaultMessage='Message 1' /></li>
  <li><FormattedMessage id='lang.key_2' defaultMessage='Message 2' /></li>
  <li><FormattedMessage id='lang.key_3' defaultMessage='Message 3' /></li>
  <li><FormattedMessage id='lang.key_4' defaultMessage='Message 4' /></li>
  <li><FormattedMessage id='lang.key_5' defaultMessage="Message 5 with {inner}" values={{ inner: <Link><FormattedMessage id='lang.key_6' defaultMessage='Message 6' /></Link> }} /></li>
  <li><FormattedMessage id='lang.key_7' defaultMessage='Message 7' /></li>
</ul>

```

Desired output:

```
<FormattedMessage id='lang.key_1' defaultMessage='Message 1' />
<FormattedMessage id='lang.key_2' defaultMessage='Message 2' />
<FormattedMessage id='lang.key_3' defaultMessage='Message 3' />
<FormattedMessage id='lang.key_4' defaultMessage='Message 4' />
<FormattedMessage id='lang.key_5' defaultMessage="Message 5 with {inner}" values={{ inner: <Link><FormattedMessage id='lang.key_6' defaultMessage='Message 6' /></Link> }} />} /></li>
<FormattedMessage id='lang.key_6' defaultMessage='Message 6' />
<FormattedMessage id='lang.key_7' defaultMessage='Message 7' />

```