Search code examples
reactjswebstormlive-templates

How to use regularExpression function in Live Templates?

  1. I trying to insert value from clipboard with regular expression. How to do it?
  2. Is it possible to delete svg tag with properties using regex?

I tried to write regularExpression(SVG, width="(\d+)px", $1) and variation of this.

For example

I've got this in my clipboard

    <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-932.000000, -4274.000000)">
          <g transform="translate(0.000000, 4184.000000)">
            <g transform="translate(932.000000, 90.000000)">
              <rect fill="#3C5494" x="0" y="0" width="32" height="32" rx="16"></rect>
              <path d="M17.1973392,16.7117794 L19.5654279,16.7117794 L19.9199468,13.8590668 L17.1973392,13.8590668 L17.1973392,12.0421097 C17.1973392,11.2181543 17.4178625,10.6566668 18.5566829,10.6566668 L20,10.6559859 L20,8.11206559 C19.7488603,8.07744655 18.887255,8 17.8848071,8 C15.7919823,8 14.3592018,9.32549911 14.3592018,11.759728 L14.3592018,13.8590668 L12,13.8590668 L12,16.7117794 L14.3592018,16.7117794 L14.3592018,24 L17.1973392,24 L17.1973392,16.7117794 Z" fill="#FFFFFE"></path>
            </g>
          </g>
        </g>
      </g>
    </svg>

I use this template 

/* eslint-disable max-len */
import React from 'react'
import Icon from './Icon'

const $NAME$ = ({ width, height }) => (
  <Icon
    width={width}
    height={height}
    viewBox='0 0 $width$ $height$'
  >
    $SVG$$END$
  </Icon>
)

export default $NAME$

image

And I'm trying to insert $width$ and $height$ from svg properties

I except viewBox to be '0 0 32 32', but I get '0 0 '

Solution

  • regularExpression(String, Pattern, Replacement) Live Template function is run in the following way: all occurrences in String matching Pattern are replaced by the third argument, and the resultant string is returned (see the function implementation in https://github.com/JetBrains/intellij-community/blob/master/platform/lang-impl/src/com/intellij/codeInsight/template/macro/RegExMacro.java). So, the result of regularExpression(SVG, width="(\d+)px", $1) is your clipboard content with width="32px" replaced with 32