【使い方】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>が入っている要素には利用できません（未対応）

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

<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）属性を指定します。

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」のサポートはまだ暫く続きますので

スポンサーリンク