Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

たまにはコピペ用のエントリも書きたくなってきたので、以前、参照コードを<pre>で書くかって記事ら辺で作った整形フォームをバージョンアップしました。

ラジオボタンで<pre><code>タイプと<ol><li><code>タイプを切り替えてます。ホントは<ol>タイプ用に行頭の空白を数えるとこまでやっときたかったんだけど、力及ばず。JavaScriptの正規表現はまだよく掴めない＾＾；

以下、記録用にソースコードと関連リンクを貼っときます。今回は配布用じゃないので、あんま綺麗じゃないけど！

JavaScript

1. var escape_html= {
2. init: function(){
3. var ex1 = document.getElementById('ex1');
4. var ex2 = document.getElementById('ex2');
5. var ori = document.getElementById('text1');
6. var gen = document.getElementById('text2');
7.  
8. if(ex1.checked == true) this.genOrderList(ori,gen);
9. if(ex2.checked == true) this.genPreformat(ori,gen);
10. },
11.  
12. genOrderList: function(ori,gen){
13. var str = ori.value;
14. var str2 = "";
15.  
16. // 一行ずつ分解
17. var line = new Array;
18. line = str.split('\n');
19.  
20. for(var i=0;i<line.length;i++){
21. line[i] = this.escapeTag(line[i],true);
22.  
23. // 偶数行なら...奇数行なら...
24. if((i+1)%2 == 0) {
25. line[i] = line[i].replace(/^/,'<li class="even tab1"><code>');
26. line[i] = line[i].replace(/$/,'</code></li>');
27. } else {
28. line[i] = line[i].replace(/^/,'<li class="odd tab1"><code>');
29. line[i] = line[i].replace(/$/,'</code></li>');
30. };
31.  
32. // 行末に改行コードを入れて連結
33. str2 = str2 + '\n' + line[i];
34. }
35.  
36. // HTMLタグを挿入
37. str2 = str2.replace(/^/g,'<ol class="codelist">');
38. str2 = str2.replace(/$/i,'\n</ol>');
39. str2 = str2.replace(/<code><\/code>/ig,'<code>&nbsp;</code>');
40.  
41. this.genSample(gen,str2);
42. },
43.  
44. genPreformat: function(ori,gen){
45. var str = ori.value;
46. var str2 = "";
47.  
48. // 一行ずつ分解
49. var line = new Array;
50. line = str.split('\n');
51.  
52. for(var i=0;i<line.length;i++){
53. line[i] = this.escapeTag(line[i]);
54.  
55. // 行末に改行コードを入れて連結
56. str2 = str2 + '\n' + line[i];
57. }
58.  
59. // HTMLタグを挿入
60. str2 = str2.replace(/^/g,'<pre class="codelist"><code>');
61. str2 = str2.replace(/$/i,'\n</code></pre>');
62.  
63. this.genSample(gen,str2);
64. },
65.  
66. escapeTag: function(str,head){
67. // 行頭/行末の空白を削除
68. if(head) str = str.replace(/^\s+/g,'');
69. str = str.replace(/\s+$/g,'');
70.  
71. str = str.replace(/\&/g,'&');
72. str = str.replace(/\</g,'&lt;');
73. str = str.replace(/\>/g,'>');
74. str = str.replace(/\"/g,'"');
75. str = str.replace(/\'/g,''');
76.  
77. return str;
78. },
79.  
80. genSample: function(gen,str2) {
81. // textareaに出力
82. gen.value = str2;
83.  
84. // Sample生成
85. var prev = document.getElementById('sample');
86. var body = document.getElementById('exampleOutput');
87. var sample = document.createElement('div');
88. sample.setAttribute('id', 'sample');
89. sample.innerHTML = '<h3>Sample</h3>\n' + str2;
90.  
91. if(prev) {
92. body.replaceChild(sample,prev);
93. } else {
94. body.appendChild(sample);
95. }
96. }
97. }

関連記事

• ソースコード整形フォーム
• コードは<pre>でマークアップするべき ...か？