現代のクライアントサイドアプリケーション、特にリッチなWebインターフェースが普及する中で、開発者がHTML文字列を直接操作する場面は少なくありません。これは、現在表示されているページのDOMを操作するのではなく、独立したHTMLコンテンツの文字列そのものを処理するケースを指します。

たとえば、WYSIWYGエディタなどで生成されたHTMLコンテンツをバックエンドに送信する前に、特定のルールに基づいて整形する必要があるとします。一例として、エディタが出力したすべての画像（![]()タグ）の幅を統一して90%に設定したい、という要件が挙げられます。

次のようなHTML文字列があったと仮定します。

<p>美しい風景</p>
![風景写真](./scenery1.png)
<p>魅惑的な都市</p>
![都市の夜景](./cityscape.jpg)
<p>夢のような時間</p>
![抽象的なイメージ](./dream.gif)

この文字列に対して、どのように画像幅の変更を適用するでしょうか？文字列操作と聞くと、多くの開発者はまず正規表現を思い浮かべるかもしれません。しかし、HTMLのような構造化されたテキストの変更に正規表現を用いると、しばしば予期せぬ複雑さや脆弱性を招きます。

たとえば、全ての![]()タグにwidth: 90%;というスタイルを適用することを考えます。正規表現でこれを実現しようとすると、以下のような問題に直面します。

• ![]()タグがstyle属性を持っているか、持っていないか。
• style属性の中に既にwidthプロパティが存在するか、しないか。
• 既存のstyle属性を上書きせずに、widthプロパティだけを追加または変更する方法。

これらのケースをすべて網羅し、堅牢な正規表現を作成することは非常に困難であり、メンテナンス性も低下します。HTMLは正規言語ではないため、正規表現で完全にパース・操作することは本質的に不向きです。

ここで有効なアプローチが、DOM操作の利用です。JavaScriptライブラリであるjQueryのようなツールを使用すると、HTML文字列を一時的にメモリ上のDOM要素として扱うことができます。これにより、ブラウザが実際のページDOMを操作するのと同じ感覚で、文字列内の要素を検索、変更、追加することが可能になります。

以下のjQueryを使ったコード例をご覧ください。

// 仮想的なDOMコンテナ要素をjQueryで作成
const $temporaryContainer = $('<div></div>');

// 処理対象のHTML文字列
const originalHtmlContent = `
  <p>この記事は例です</p>
  ![サンプル画像1](./sample1.jpg)
  <p>コンテンツを続けます</p>
  ![サンプル画像2](./sample2.png)
`;

// HTML文字列をメモリ内のコンテナに挿入
// これにより、文字列がDOM要素として扱えるようになる
$temporaryContainer.append(originalHtmlContent);

// コンテナ内の全てのimg要素を検索し、それぞれの要素に対して処理を実行
$temporaryContainer.find('img').each(function() {
  // 各img要素のCSS "width" プロパティを90%に設定
  // jQueryの.css()メソッドは、style属性の有無や既存のwidthプロパティを考慮し、適切に処理する
  $(this).css('width', '90%');
});

// 変更が適用された後のHTML文字列をコンテナから取得
const modifiedHtmlContent = $temporaryContainer.html();
console.log(modifiedHtmlContent);

// 実際のアプリケーションでは、このmodifiedHtmlContentをサーバーに送信したり、表示に利用したりします。

このコードでは、まずjQueryで一時的なdiv要素（$temporaryContainer）を作成し、その中に操作したいHTML文字列を挿入します。jQueryはこれを自動的にDOM要素の集合として解釈し、メモリ上に配置します。その後、find('img')で全ての![]()要素を検索し、each()メソッドでそれぞれの要素に対してcss('width', '90%')を適用しています。このcss()メソッドは、既存のstyle属性やwidthプロパティの状態を適切に処理してくれるため、開発者は複雑な条件分岐を考慮する必要がありません。

このように、DOM操作を活用することで、HTML文字列の変更タスクは正規表現を用いるよりもはるかに直感的で、堅牢かつメンテナンスしやすい形で実現できます。jQueryのようなライブラリが提供する強力なDOM操作能力は、実際のウェブページだけでなく、メモリ上の仮想的なHTMLコンテンツに対しても同様に有効であることを理解することが重要です。