Blog本サイトはJavaScriptが有効の状態にないと正常に表示されません。このメッセージが表示される場合、ブラウザの設定状況をご確認ください。長野県を拠点に活動するフリーランスのグラフィック&WebデザイナーのWebサイトです。備忘録テキストエディタで正規表現の置換(検索)を行う際に、一部分だけを残し、その他の部分を置き換える、いわゆる後方参照を使った置換ができることを知ったのでメモ。忘れそうなので詳細を記載します。正規表現を使って置換ができるテキストエディタであれば、たぶん全部同じ感じでいけると思います。すべて同じ要領でいけました。文章にするのがとても難しくて、一部でおかしな表現を使ってしまっているところがあるかもしれませんが、その点につきましては何卒ご容赦ください。各テキストエディタ共通で、メニューから「置換」を選択すると、正規表現ではおなじみの「.*」というボタンがでてくるので、それをクリックすると正規表現を使った置換(検索)ができるようになります。後方参照とは一致したパターンの一部分をキャッシュ(記憶)して、あとで参照できるようにすること。置換の際に後方参照が使えると、キャッシュした部分を置換文字列の入力時に呼び出すことができるようになります。置換文字列の入力時にそのキャッシュした部分を呼び出すことができると、その部分だけを残して、それ以外の部分を置き換えるということが可能になります。基本的には普通に正規表現で後方参照するのと同じ感じで、パターンの残したい部分を括弧で囲み、その部分は$1で参照できるようになるので、置換文字列の入力時に呼び出して置換を行います。残したい部分が2箇所以上の場合には、括弧を増やし、増やした分だけ$2、$3...とすれば複数箇所で変更が可能になります。具体的には、以下のようにやります。//検索対象aabbccddee//検索文字列aabb(c)cddee//置換文字列ab$1de//置換後の結果abcde2箇所以上残したい部分がある場合には以下のような感じ。//検索対象aabbccddee//検索文字列aa(b)b(c)c(d)dee//置換文字列a$1$2$3e//置換後の結果abcdeこれだとさすがに分かりづらいので、もっと実践的にやってみたのが以下。class="bar">test2</p>上記は、divタグをpタグへ置換え、classと値はそのまま残すということを行っています。class名や値はそれぞれ異なりますが、正規表現で検索を行っているため取得でき、かつ後方参照で置換を行っているので、異なるclass名や値でもそのまま残すことができています。ATOMのスクショエディタの機能やプラグインでもできるかもしれませんが、簡単で便利な方法なのでぜひ覚えておきたいですね。正規表現は苦手なので頑張る。MonSVGでハンドライティングアニメーションを実装する文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。同じようなことをやっていて、それのSVGバージョン。正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。vol.7」に参加および登壇させていただきました。感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを...ABOUT長野県北部を拠点にフリーランスとして活動しています。Webサイトの制作をメインに、グラフィックデザインなどの制作も行っています。ARCHIVES2017年6月2017年4月2017年3月2017年1月2016年12月2016年9月2016年8月2016年7月2016年4月2016年3月2015年12月2015年10月2015年9月2015年6月2015年5月2015年3月2015年2月2015年1月2014年12月2014年11月2014年10月2014年9月2014年8月2014年6月2014年5月2014年4月2014年3。