正規表現：SyntaxHighlighterのブラシ一覧をコンボボックスに変換する

SyntaxHighlighter のブラシ一覧(*1)をWebページのコンボボックスから選択できるようにしたいと思い、SyntaxHighlighter のブラシをコンボボックスの HTML に変換しました。



*1
SyntaxHighlighter - Bundled Brushes
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


その時に、(*1) のページのテキストをコピーして、正規表現により機械的にコンボボックスの HTML を作りました。

その時の手順を以下に紹介します。

(1) SyntaxHighlighter - Bundled Brushes (*1)からブラシ一覧をコピー

SyntaxHighlighter - Bundled Brushes のページより、ブラシ一覧をテキストとしてコピーすると以下のようになります。

ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

(2) Visual Studio 2010 の置換機能により、以下の正規表現にて置換

検索する文字列：^{[^\t]+\t}{[^:b,]+}{:b*}{.*}$
置換後の文字列：<option value="\2" />\1


この正規表現の意味は次のようになります。

検索する文字列：

(1) 行の先頭から開始される
タグ1 
{
　(2) タブではない文字が1つ以上出現する
　(3) タブが出現する
}
タグ2 
{
　(4) タブ,スペース, "," ではない文字が1つ以上出現する
}
タグ3 
{
　(5) タブやスペースが 0 以上出現する
}
タグ4
{
　(6) 何らかの文字が 0 以上出現する
}
(7)行の終端が現れる

置換後の文字列：

正規表現にマッチングしたタグを置換後の文字列に以下のように組み込む

<option value="タグ2" />タグ1

例）

次の行を使用して正規表現のマッチングを見てみましょう。

ActionScript3 as3, actionscript3 shBrushAS3.js

以下の検索用正規表現を文字列の先頭から当てはめていきます。

(1) 行の先頭から開始される
タグ1 
{
　(2) タブではない文字が1つ以上出現する
　(3) タブが出現する
}
タグ2 
{
　(4) タブ,スペース, "," ではない文字が1つ以上出現する
}
タグ3 
{
　(5) タブやスペースが 0 以上出現する
}
タグ4
{
　(6) 何らかの文字が 0 以上出現する
}
(7)行の終端が現れる


文字列に正規表現をマッピングすると次のようになります。

(1)タグ1{(2)[ActionScript3](3)[ ]}タグ2{(4)[as3]}タグ3{(5)}タグ4{(6)[, actionscript3 shBrushAS3.js]}(7)

タグにマッチングする部分を 
　タグ名{ タグにマッチングする部分 } 
で表記しました。

各正規表現にマッチングする部分を
　正規表現の説明用番号[ 正規表現にマッチングする部分 ]
で表記しました。

従って、置換後の文字列は

説明用の文字あり：
<option value="タグ2{(4)[as3]}" />タグ1{(2)[ActionScript3](3)[ ]}

説明用の文字なし：
<option value="as3" />タグ1{ActionScript3 }
となります。


※ 実施した後に気が付きましたが、検索用の正規表現は

^{[^\t]+\t}{[^:b,]+}{:b*}{.*}$

ではなく、

^{[^\t]+}\t{[^:b,]+}{:b*}{.*}$

の方がより正確でしたね。
置換後の文字列のタグ1 に不要なタブが含まれずに済みますので。

置換結果

<option value="as3" />ActionScript3 
<option value="bash" />Bash/shell 
<option value="cf" />ColdFusion 
<option value="c-sharp" />C# 
<option value="cpp" />C++ 
<option value="css" />CSS 
<option value="delphi" />Delphi 
<option value="diff" />Diff 
<option value="erl" />Erlang 
<option value="groovy" />Groovy 
<option value="js" />JavaScript 
<option value="java" />Java 
<option value="jfx" />JavaFX 
<option value="perl" />Perl 
<option value="php" />PHP 
<option value="plain" />Plain Text 
<option value="ps" />PowerShell 
<option value="py" />Python 
<option value="rails" />Ruby 
<option value="scala" />Scala 
<option value="sql" />SQL 
<option value="vb" />Visual Basic 
<option value="xml" />XML 

これでコンボボックスの各要素を機械的に生成することが出来ました。
後は、以下のHTMLのタグでこの<option>を囲めば、Webページ上にコンボボックスを配置できます。

<form>
<select>
<option value="as3" />ActionScript3 
--- 省略 ---
<option value="xml" />XML 

</select>
</form>

実際に Web ページを表示してみると次のようになります。

コンボボックス - SyntaxHighlighterのブラシ一覧

このコンボボックスは、

SyntaxHighlighter用の<pre>タグを作成するWebサービス - <pre> Generator for SyntaxHighlighter
http://drupa.jpn.org/SyntaxHighlighter-pre-Generator/

にて使用しています。