エクセルから表組みをWEBページにコピペすると、エクセルの表示ほぼそのままにHTMLに変換してくれるという便利なサービスがありました。セルの結合が正確にテーブルにコンバートされていることにいたく感動して、どんなすごいことをしているんだろう？――とコードを解析してみてわかったことは少し意外なことでした。 なんとそれを実現しているのは**「contenteditable」**というHTMLの属性だけだったのです。 この属性は、タグの中の要素をブラウザから編集可能にできるという、本来ならもっと使われていいはずの機能なのですが、[仕様が複雑怪奇](https://engineering.linecorp.com/ja/blog/contentable-development-of-line-blog-apps/)だったためか、あまり使われているのを見かけません。わたしもこれで縦書きエディタを作れるんじゃないかと奮闘したものの、うまくコントロールできず諦めた記憶があり、それからは使っていません。こんな使い方があったとは…… エクセルの表組みをコピーして単純にテキストエリアにペーストしても、そこにペーストされたデータは単なるテキストデータです。しかし実際はエクセルからコピーした段階でHTML形式の書式を持っているのです。そして、それをそのままペーストできるようにするのが **contenteditable** というわけです。 使い方は簡単、コレだけです。 まずはシンプルにリスナーでペーストのイベントを受け取って、ペーストされたHTMLコードをコンソールに出力するようにしてみましょう。 const _pastearea = document.getElementById('pastearea') _pastearea.addEventListener('input', function(){ console.log(_pastearea.innerHTML); }) ここまでで仕組みはわかってもらえると思うのですが、もうすこし使えるようにしてみましょう。 ペーストされたコードにはゴチャゴチャと属性などが付いているので、一度真っ新なテーブルにすることにします。 HTMLにプレビューとソースコードを出力するエリアをつくり、上のコードを改変します。

※「＜」と「＞」は半角に置き換えてください。 const _pastearea = document.getElementById('pastearea') const _resultarea = document.getElementById('resultarea') const _resultcodearea = document.getElementById('resultcodearea') const html_enc = (str) =＞ { if (str) return str.replace(/＜/g, '<').replace(/＞/g, '>'); } _pastearea.addEventListener('input', function(){ _codearea.innerHTML = html_enc(_pastearea.innerHTML); // _pasteareaをディープコピー const _dom = _pastearea.cloneNode(true) // 不要な属性を削除 _dom.querySelector('table').removeAttribute('border') _dom.querySelector('table').removeAttribute('cellpadding') _dom.querySelector('table').removeAttribute('cellspacing') _dom.querySelector('table').removeAttribute('width') _dom.querySelector('table').removeAttribute('style') const _tr = _dom.querySelectorAll('tr') _tr.forEach(function(tr){ tr.removeAttribute('height') tr.removeAttribute('style') const _td = tr.querySelectorAll('td') _td.forEach(function(td){ td.removeAttribute('width') td.removeAttribute('height') td.removeAttribute('class') td.removeAttribute('style') }); }); // 不要なタグを削除 _dom.querySelector('colgroup').remove() // 整形済みテーブルを#resultareaに出力 _resultarea.innerHTML = _dom.innerHTML // 整形済みテーブルを#resultcodearea出力 _resultcodearea.innerHTML = html_enc(_dom.innerHTML) }); 下記にサンプルを置いておきましたのでお試しください。 https://www.chaordic.co.jp/memorandum/sample/exceltable.html