構造検索と置換の例
ご存じのように、通常検索と構造検索の主な違いは、構造検索ではプログラミング言語の構造テンプレートを探していることです。
構造検索の利点は、既存のテンプレートに基づいてパターンを作成し、検索と置換の際に時間を節約できる点です。
既存テンプレートの豊富なリストは、シンプルなパターンからより複雑なパターンまで、多くのユースケースをカバーします。
パターン内の各アイテムは、両側に $ 記号で囲まれた変数で構成されます。
メソッド呼び出し
メソッド呼び出しを検索するための最も簡単なテンプレートは $Instance$.$MethodCall$($Arguments$) です。
検索 ツールウィンドウには、検出されたメソッド呼び出しが表示されます。
特定の数の引数を持つメソッド呼び出しを見つける必要がある場合は、 $Arguments$ 変数にキャレットを置き、その変数に対して 数フィルターを構成します。
検索 ツールウィンドウの検索結果のリストが縮小します。
ソースコード内のメソッド呼び出しに移動するには、 検索 ツールウィンドウ内でそれをダブルクリックします。 WebStorm が対応するファイルをエディターで開き、キャレットをメソッド呼び出しの位置に移動します。
検出されたメソッド呼び出しを含むソースコードは、 検索 ツールウィンドウの右側のペインにも表示されます。
JavaScript および Typescript クラス
JavaScript クラスまたは Typescript クラスを使用している場合は、 MyClass:
それからそれを検索する最も簡単なテンプレートは class $name$ {} です。
インターフェースの実装
JavaScript または Typescript インターフェース MyInterface とそれを実装するクラス Implementation がある場合:
次に、実装を検索するための最も簡単なテンプレートは class $Class$ implements $SomeInterface$ {} です。
子孫クラス
JavaScript または Typescript クラス Parent とそれを拡張するクラス Descendant がある場合:
Descendant を検索するための最も簡単なテンプレートは class $Class$ extends $AnotherClass$ {} です
ステートメント
if ステートメントが if($var$){$code$} である場合に検索するための最も簡単なテンプレート
その結果、検出された出現箇所は 検索 ツールウィンドウに表示されます。興味のあるものをダブルクリックするとソースコードへ移動します。 WebStorm が対応するファイルをエディターで開き、キャレットをステートメントの位置に移動します。
コメントと文字列リテラル
SomethingWeWantToFind を含むコメントまたはリテラルを検索するための最も簡単なテンプレートは、 $SomethingWeWantToFind$ または "$SomethingWeWantToFind$" です。 特定の単語（たとえば、単語として SomethingWeWantToFind ）を含むコメント / 文字列を検索するには、これをテキスト制約として指定する必要があります。
HTML と XML の例
次の例は、HTML や XML コードで構造検索を使用する方法を示しています。
XML および HTML タグ、属性、それらの値の検索
タグを検索する最も簡単なテンプレートは <$tag$/> です。
変数
$tag$に制約を設定することにより、検索するタグを指定できます。 例:scriptを指定すると、すべてのscriptタグが取得されます。
次の XML および HTML 用検索テンプレートを考えてみましょう：
<$tag$ $attribute$=$value$ />。 例えば、$tag$変数にscriptのテキストフィルタ、$attribute$変数にsrcを指定すると、リストが絞り込まれます：
id 属性が 2 より大きい行をすべて削除する
HTML ファイルを作成し、次のコードを貼り付けてください：
<!doctype html> <html> <head> <title>Structural Search Example</title> <body> <ul> <li id="1">Example line 1</li> <li id="2">Example line 2</li> <li id="3">Example line 3</li> <li id="a">Example line a</li> <li id="5">Example line 5</li> </ul> </body> </html>メインメニューで へ移動します。
言語 リストから HTML（エイチティーエムエル） を選択してください。
次の文字列を 検索テンプレート フィールドに貼り付けます。
<$tag$ $attribute$="$value$">$tag$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 テキスト を選択して、値フィールドに
liと入力します。フィルターパネルが表示されていない場合は、
修飾子パネルを切り替える をクリックします。
$attribute$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 テキスト を選択して、値フィールドに
idと入力します。$value$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 テキスト を選択して、値フィールドに
\d+と入力します。\d+正規表現は、検索結果を数値に制限します。 そのため、id="a"のある行は除外されます。フィルターパネルからフォーカスを切り替えずに、 追加 ボタンをクリックし、 スクリプト を選択して、次のコードを貼り付けます。
value.getText().replaceAll (/"/, '').toInteger() > 2スクリプトは
$value$変数の内容を読み取り、それを文字列として返します（たとえば、"1"）。 次に、スクリプトはすべての引用符を置き換え、文字列値を整数に変換して、2と比較します。
li タグのクラス属性の大文字の値を小文字に変換する
HTML ファイルを作成し、次のコードを貼り付けてください：
<!doctype html> <html> <head> <title class="EXAMPLE">Structural Replace Example</title> <body> <ul> <li class="EXAMPLE">Example line 1</li> <li class="example">Example line 2</li> <li class="EXAMPLE">Example line 3</li> <li class="example">Example line a</li> <li id="EXAMPLE">Example line 5</li> </ul> </body> </html>メインメニューで へ移動します。
言語 リストから HTML（エイチティーエムエル） を選択してください。
次の文字列を 検索テンプレート フィールドに貼り付けます。
<$tag$ $attribute$="$value$">大文字・小文字を区別 チェックボックスを選択します。
$tag$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 テキスト を選択して、値フィールドに
liと入力します。$attribute$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 テキスト を選択して、値フィールドに
classと入力します。$value$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 テキスト を選択して、値フィールドに
[A-Z].*と入力します。[A-Z].*正規表現は、検索結果を大文字に制限します。ターゲット リストから 値 を選択してください。 この手順では、
class属性のすべての大文字の値をハイライトします。置換テンプレート フィールドに、
$to_lower_case$変数を貼り付けます。$to_lower_case$変数をクリックします。フィルターパネルで、 修飾子を追加 をクリックし、 スクリプト を選択して、次のコードを貼り付けます。
value.getText().toLowerCase()
検索 をクリックしてください。
検索 ツールウィンドウで検出結果をプレビューし、 すべて置換 をクリックします。
