sikaku

改行の操作ができるコピーボックス

閲覧者が任意で改行その他を削除できるコピーボックスです。テンプレ配布サイトさん向け。

「テキストエリアの改行をそのまま出力する」設定の、携帯向けサービス利用者さんが案外多いようなので作ってみました。

改行を消せるタイプ

demo & source code

demo

HTML
  1. <textarea class="copybox1" id="box1">いろはに……</textarea>
  2. <input type="checkbox" data-cbox="box1" />改行削除
jQuery
  1. $(function(){
  3. $('.copybox1').each(function(){
  5. var $tgt = $(this);
  6. var $chk = $('[data-cbox="'+$tgt.attr('id')+'"]');
  7. var org = $tgt.val();
  9. $chk.on('change',function(){
  10. $tgt.val( !$chk.prop('checked') ? org : org.replace(/\n/g,'') );
  11. }).trigger('change');
  13. });
  15. });
  • box1でチェックボックスとテキストエリアを紐付け
  • 完全削除ではなく、半角スペース等に置き換えたい場合は''を' '('置き換え内容')に変更

色々消せるタイプ

demo & source code

demo
HTML
  1. <textarea class="copybox2" id="box2">いろはにほへと
  2. &lt;!--ちりぬるを--&gt;</textarea>
  3. <input type="checkbox" data-cbox="box2" name="br" />改行削除
  4. <input type="checkbox" data-cbox="box2" name="sp" />ｲﾝﾃﾞﾝﾄ削除
  5. <input type="checkbox" data-cbox="box2" name="co" />ｺﾒﾝﾄｱｳﾄ削除
jQuery
  1. $(function(){
  3. $('.copybox2').each(function(){
  5. var $tgt = $(this);
  6. var $chk = $('[data-cbox="'+$tgt.attr('id')+'"]');
  8. var del = {
  9. 'sp': [0,/^[^\S\n]+/gm],
  10. 'br': [0,/\n/g],
  11. 'co': [0,/<!--.*?-->/gs]
  12. };
  13. var org = $tgt.val();
  15. $chk.each(function(){
  16. var $trg = $(this);
  17. var name = $trg.attr('name');
  18. if( !del[name] ) return true;
  19. $trg.on('change',function(){
  20. del[name][0] = $trg.prop('checked');
  21. boxWrite();
  22. }).trigger('change');
  23. });
  25. function boxWrite(){
  26. var txt = org;
  27. $.each(del,function(k,a){
  28. if( !a[0] ) return true;
  29. txt = txt.replace(a[1],'');
  30. });
  31. $tgt.val(txt);
  32. }
  34. });
  36. });
  • box1でチェックボックスとテキストエリアを紐付け
  • br等でチェックボックスと削除内容紐付け

削除内容の編集

jQuery_削除内容
  1. var del = {
  2. 'sp': [0,/^[^\S\n]+/gm],
  3. 'br': [0,/\n/g],
  4. 'co': [0,/<!--[\s\S]*?-->/g]
  5. };

上記箇所で設定しています。

  • br等：チェックボックスのname属性値と紐付
  • /\n/g等：削除内容を正規表現で記述
  • 0,：フラグ用なので気にしないでください
削除対象の増減

箇所：間

'key': [0,/target/]を,挟みで記述

編集時の注意

チェックボックスにチェックが入っている際、上記オブジェクト配列の上から順に削除処理されるので、そのあたり加味して順番を決めたり正規表現を記述してください。

デフォルトでは行頭インデント検知の為に/^[^\S\n]+/gmを指定しています。

この指定は行頭を対象とする為、改行を削除しをテキストを１行にする/\n/gの削除後は上手く動いてくれません。("１行"の行頭インデントを消してくれるが元行頭だった部分は検知時には行中の為そのまま)

そのため先頭に記述しています。

削除から置き換えに変更

完全削除ではなく、半角スペース等に置き換えたい場合は下記どちらかの編集をしてください。

全ての削除対象の置き換え後が同じで良い場合

箇所：''

'置き換え内容'と置き換え

削除対象毎に置き換え後を決める場合

箇所：

/target/後に,'置き換え内容'を追加(ここの記述についての詳細は前述削除内容の編集参照)

箇所：''

a[2]と置き換え

自動でチェックボックスまで出力してくれるタイプ

demo & source code

demo
HTML
  1. <textarea class="copybox1_auto">いろはにほへと
  2. ちりぬるを</textarea>
jQuery
  1. $(function(){
  3. $('.copybox1_auto').each(function(){
  5. var $tgt = $(this);
  6. var $chk = $('<input type="checkbox" />');
  7. var org = $tgt.val();
  9. $tgt.after($chk);
  10. $chk.after('改行削除');
  12. $chk.on('change',function(){
  13. $tgt.val( !$chk.prop('checked') ? org : org.replace(/\n/g,'') );
  14. });
  16. });
  18. });

基本処理は改行を消せるタイプと同じです。

変更点

改行を消せるタイプではにて、読み込み済のHTMLからセレクタ指定してチェックボックスを取得していましたが、上記では同行にて新規にチェックボックスを生成(そのまま変数$chkへ格納)、で対象テキストエリアの次に配置されるよう設定しています。

チェックボックスだけあっても意味不明なので、ついでににてチェックボックス横に文字列を追加。

jQuery実行後のHTMLを見る

jQuery実行後のHTML
  1. <textarea class="copybox1_auto">いろはにほへと
  2. ちりぬるを</textarea><input type="checkbox" />改行削除

この辺りはもう、特定要素に.append().prepend().before().after()あたりのメソッド使うなりで上手い事やってください。

記述例：配布用ソースコードはとにかくシンプルに、と思い上記の形にしていますが、デモは実際このような記述です。

実働jQuery
  1. $('.copybox1_auto').each(function(){
  3. var $tgt = $(this);
  4. var $chk = $('<input type="checkbox" />');
  5. var org = $tgt.val();
  7. var $lbl = $('<label />').html('<i></i>改行削除');//新規label要素生成。要素内htmlをi要素と表示用テキストに
  8. $lbl.prepend($chk);//上記label要素内先頭にチェックボックス追加
  9. $tgt.after( $('<div />').append($lbl) );//テキストエリア直後に上記label要素を内包したdiv要素を配置
  11. $chk.on('change',function(){
  12. $tgt.val( !$chk.prop('checked') ? org : org.replace(/\n/g,'') );
  13. });
  15. });
実働jQuery実行後のHTML
  1. <textarea class="copybox1_auto">いろはにほへと
  2. ちりぬるを</textarea><div><label><input type="checkbox" /><i></i>改行削除</label></div>

▽やりたかった事

  • チェックボックスはlabel要素に入れたい
  • チェックボックスについてのテキストも同要素に入れたい
  • チェックボックス直後は表示の関係でi要素の必要がある
  • テキストエリアとlabel要素を直で兄弟要素にするのは避けたい

処理についての注意

置き換え元テキストについて

どの処理も、var org = $tgt.val();部分でテキストエリアの入力内容を最初に保管し、以降チェックボックスの変化に応じて保管したテキストを元に変換しています。

つまり閲覧者が編集した内容はチェックボックス変化時に破棄されます。

避けたい方はvar org = $tgt.val();下にでも下記の処理を足してください。

追加処理
  1. $tgt.on('change',function(){
  2. org = $tgt.val();
  3. });

テキストエリアの内容変化毎に変換元にする保管テキストを変更しています。

ただこれも改行消去後に編集とかすると、改行無し状態を変換元にしちゃうのでツール自体の意味がなくなる……