javascript(jQuery)でhtmlやcss、javascriptのソースをコピーさせる

WordPressのことやHTML・CSSやjavascript(jquery)のことを記事にしていると、ページ内で使用している html、css、javascript をそのままコピーさせたい場合があります。
今回javascriptを使用して実現してみましたので、使い方などをご紹介します。

実際に動きを確認してみる

イメージとは違うかもしれませんので、まずは、実際の動きをご確認ください。
下記レイアウトを作るためのhtml、cssソースを例に実装しています。

テキストテキストテキストテキスト

コピーさせたいhtml、cssソースは下記になります。

<div class="ex-box">
    <span>テキストテキストテキストテキスト</span>
</div>
<style>
.ex-box {
    border: 1px solid #999;
    padding: 20px;
}
.ex-box span {
    color: #c00;
    font-size: 14px;
}
</style>

まずは、こちらのボタンをクリックしてみてください。

htmlをコピーする

html部分がコピーできたかと思います。

<div class="ex-box">
    <span>テキストテキストテキストテキスト</span>
</div>

次に、こちらのボタンをクリックしてみてください。

cssをコピーする

今度はcss部分がコピーできたかと思います。

<style>
.ex-box {
    border: 1px solid #999;
    padding: 20px;
}
.ex-box span {
    color: #c00;
    font-size: 14px;
}
</style>

そのほか、styleタグが不要な場合は、無しにすることもできます。
こちらのボタンをクリックしてみてください。

cssをコピーする(styleタグ無)

いかがでしょうか?
先ほどのcssから<style>、</style>を除いた下記ソースがコピーされたかと思います。

.ex-box {
    border: 1px solid #999;
    padding: 20px;
}
.ex-box span {
    color: #c00;
    font-size: 14px;
}

使い方

それでは、使い方をご説明します。

1.javascript(jQueryを使用)を設定

下記コードによって、コピーを実装しています。
コピーしてご利用ください。

※jqueryの1.12.4を使用していますので、読込が必要です(特殊な処理はしていないので、おそらくその他のバージョンでも動作するかと思います)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(function($){
    $('.copy-inner').on('click', function() {
        var target = $(this).data('target');
        var text = $(target).html();
        $(this).copy(text);
        alert('コピーしました。');
    });
    $('.copy-outer').on('click', function() {
        var target = $(this).data('target');
        var text = $(target).prop('outerHTML');
        $(this).copy(text);
        alert('コピーしました。');
    });
    $('.copy-css-with-style').on('click', function() {
        var target = $(this).data('target');
        var text = $(target).next('style').prop('outerHTML');
        $(this).copy(text);
        alert('コピーしました。');
    });
    $('.copy-css').on('click', function() {
        var target = $(this).data('target');
        var text = $(target).next('style').text();
        $(this).copy(text);
        alert('コピーしました。');
    });
    $.fn.extend({
        copy: function(text) {
            $(this).after('<textarea>'+text+'</textarea>');
            $(this).next('textarea').select();
            document.execCommand('copy');
            $(this).next('textarea').remove();
        },
    });
});
</script>

2.コピーさせたい要素を用意

下記のようにhtml、cssを記述します。
ルール・未対応がいくつかあります。

  • コピーさせたい要素(html)に任意のIDまたはclassを指定します(例の場合:ex-box)
  • cssにあたる<style>~</style>部分はコピーさせたい要素(html)の直後に記述します(重複してhead内やcssファイルに入れても大丈夫です)
  • </textarea>が入っている要素には利用できません(未対応)
styleタグについて

基本は<head>~</head>に記述する必要があります。ですが、最近のブラウザであれば、<body>~</body>でも正常に動作するように思います。
ただ、<style>~</style>部分は<head>~</head>内もしくはcssファイルにに重複して記述しておくのが無難かと思います。

以下、ルールに則った例になります。

<div class="ex-box">
    <span>テキストテキストテキストテキスト</span>
</div>
<style>
.ex-box {
    border: 1px solid #999;
    padding: 20px;
}
.ex-box span {
    color: #c00;
    font-size: 14px;
}
</style>

javascriptもコピーさせたい場合

コピーさせたい要素(html)の中に<script>~</script>を記述するのがシンプルです。
スタイル部分のようにルールを決めて対応しても良いのですが、意味合い的にもこの形で良いかなと思います。

例としては下記の通りです。アラート表示の処理を入れました。

<div class="ex-box">
    <span>テキストテキストテキストテキスト</span>
<script>
alert('コピーさせたい要素内です');
</script>
</div>
<style>
.ex-box {
    border: 1px solid #999;
    padding: 20px;
}
.ex-box span {
    color: #c00;
    font-size: 14px;
}
</style>

ボタンの設定

ボタンなどの動作を開始させるための要素にはclass属性とカスタムデータ(data-target)属性を指定します。

対象 class data-target
html copy-outer .ex-box
css copy-css-with-style .ex-box
css(styleタグ無) copy-css .ex-box

html(コピーさせたい要素)

html限定というわけではありません。
「data-target」に指定した要素自身を含めコピーするという処理になります。

<span class="copy-outer" data-target=".ex-box">ボタン(html)</span>

css

こちらはルールがあります。html要素の直後に「<style>~</style>」を記述する必要があります。
「data-target」に指定した要素自身の直後の「style要素」をコピーするという処理になります。

<span class="copy-css-with-style" data-target=".ex-box">ボタン(css)</span>

css(styleタグ無)

こちらは上のcssのルールと同じです。ただし、「style要素の中身」だけをコピーするという処理になります。(<style>、</style>無し)

<span class="copy-css" data-target=".ex-box">ボタン(css※styleタグ無)</span>

その他

他に、要素の中身だけをコピーすることもできます。

<span class="copy-inner" data-target=".ex-box">ボタン(要素の中身だけ)</span>

実際にクリックしてご確認ください。

html(中身だけ)をコピーする

「ex-box」の中身だけコピーされたかと思います。

    <span>テキストテキストテキストテキスト</span>

注意点

Firefox、Chrome、Edgeの最新では問題なく動作します。

ただし、IEに関しては、下記画像が表示されます。

「アクセスを許可する」をクリックするとコピーできますので、動作的に問題はありません。
ただし、場合によっては確認メッセージが表示される旨の注釈は必要になるかもしれません。
※「IE11」のサポートはまだ暫く続きますので