Wordの表をHTMLにがんばって変換する

Wordには表を作成する機能があります。

仕事柄、作業依頼者から渡されるWordファイルには表が使われていることが多く、これを「HTMLに落とし込みたい」というのが本記事の趣旨です。

ちなみに、WordHTML等のオンラインサービスがあることは存じています。何度もお世話になっています…。

作業環境

• Windows 10
• Visual Studio Code
• Word 2016

作業対象の表

今回は、こちらの表をがんばってHTMLにします。

作業手順

1. Wordの表内で、改行をすべて別の文字（なるべくタブ文字以外）に変換する
2. 表をエディタにコピペ
3. Wordの表は列がタブ文字区切りになっていることを利用して、置換を実施

Wordの表内にある改行を別の文字に変換する

事前作業として、セルに含まれる改行を別の文字に変換します。タブ文字は避けてください。列の区切りにタブ文字が使用されているためです。

ctrl+Fでナビゲーションを出現させたあと、「高度な検索」をクリックします。

下記のとおり置換を実施します。（今回は全角スペースを入れています。）

検索する文字列	置換後の文字列
^p	任意の文字

余談ですが、表をよく見ると、改行記号に似たコの字の記号があります。

セルの終わりを表す記号のようですが、これを「文書の検索」機能でマッチさせることはできません。また、エディタでは改行として扱われるため、セル内の改行か行区切りとしての改行かの区別ができなくなります。こういう理由で、このあとの作業を簡潔にするために、改行をすべて別の文字に変えたいのです。

エディタにコピペ

先ほど置換したあとの表を、エディタにコピペしましょう。今回はVisual Studio Codeにコピペします。

エディタでHTMLを組む

先ほどの表をエディタにコピペしました。

1行目はtheadの中身に、2行目以降はtbodyの中身になります。4列6行の表組みです。これをHTMLのタグで囲います。

事前に謝っておきたいのですが、本記事では全セルをtdタグで囲います。単純に、thとtdで置換を複数回おこなうのが面倒だからです…。これから正規表現を使用しますが、知識のある方は一発で行けると思います。繰り返しますが、本記事では全セルをtdタグで囲います。

以下内容で置換を実施します。

検索する文字列	置換後の文字列
^(.*)\t(.*)\t(.*)\t(.*)	<td>$1</td><td>$2</td><td>$3</td><td>$4</td>

置換後の結果です。

<td>氏名</td><td>所属</td><td>年齢</td><td>仕事内容</td>
<td>マイケル・ジャクソン</td><td>ダンス協会　アウ！ムーンウォーク研究会</td><td>12　テスト</td><td>ダンスをしたり、歌を歌ったりするよ　時々ミュージックビデオをつくります。</td>
<td>マイク・タイソン</td><td>ボクシング協会　会長　補佐</td><td>87</td><td>うららららららら　だらららっららら</td>
<td>リンゴ・スター</td><td>カラオケ店店長</td><td>43</td><td>歌を歌います</td>
<td>田中　角栄</td><td>総理大臣　代表</td><td>44</td><td>よくわかりません</td>
<td>安藤　サクラ</td><td>うおおおお　わからんのじゃああ</td><td>23</td><td>女優です</td>

前項で、Word内の改行を別の文字に置換しました。その分をエディタ上で元に戻す置換を実施して、ひとまずHTMLへの落とし込みは終わりになります。これからclassを付けたり、タグ自体を変えたりする作業が待っていますね。。 ただ、Wordからいちいち1セルずつ値をコピーしないで良くなるのは、純粋に助かるなと思っています。

記事の内容は終わりになります。

終わりに

完全ではないですが、不十分でもないと思っているので、ブラッシュアップできればやってみたいと思います。最近、正規表現のグループキャプチャを利用した置換をよくおこなっているのですが、とっても便利ですね…。