1

The Original Problem

I have a folder of jsx files with 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' />
  • Unfortunately grep was not designed to parse XML/HTML. This is a very well known limitation of grep. – Hydranix Apr 13 '17 at 7:23
  • The situation is complicated. JSX is mixing XML syntax into javascript files (not the other way round). Is there any tools that might suit the job? – Koala Yeung Apr 13 '17 at 7:26
  • If the syntax of the <FormattedMessage> tags doesn't widely vary, it may well still be possible with a quick bash script and grep. – Hydranix Apr 13 '17 at 7:55
1

Your problem lends itself to recursive regexes since a pattern is contained within the same pattern multiple times.

perl -lane '
   $. == 1 and $re = qr{
      (                        # capturing group start
         <FormattedMessage\s   # match tag opening
           (?:
              (?>[^<>])+       # consume as many non-angle brackets as is possible
                |
              (?1)             # otherwise, recurse
                |
              (?>.*?>)         # skip a noninteresting tag
           )*
        />                     # match tag closing
     )                         # capturing group end
  }x;

  next unless /<FormattedMessage\s/;

  while ( my @tags = /$re/g ) {
    print for @tags;
    $_ = join $,, map { s/^<(.*)>$/$1/r } @tags;
  }

' file1

Result

<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> }} />
<FormattedMessage id='lang.key_6' defaultMessage='Message 6' />
<FormattedMessage id='lang.key_7' defaultMessage='Message 7' />
0

Pass the output from your first grep to the sed:

sed -n 'p;s,..*\(<FormattedMessage[^>]*>\).*,\1,p'

Output:

$ grep -REho '<FormattedMessage .*\/>' file | sed -n 'p;s,..*\(<FormattedMessage[^>]*>\).*,\1,p'

<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> }} />
<FormattedMessage id='lang.key_6' defaultMessage='Message 6' />
<FormattedMessage id='lang.key_7' defaultMessage='Message 7' />
  • Thanks. I tried. It works with our input but failed on mine. I've further test why it failed. It turns out the difference between my actual data is not similar enough with my previously shared mock-code. I've updated the question with a much similar code (that, unfortunately doesn't work with the sed command you provided). – Koala Yeung Apr 13 '17 at 9:08
  • @KoalaYeung see the edit. – jimmij Apr 13 '17 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.