学び

【SAKURA HTMLエスケープ文字変換】サクラエディタの便利機能マクロで「HTMLエスケープ文字を自動変換する方法(サンプルコード)」のご紹介

サクラエディタの便利機能マクロで「HTMLエスケープ文字を自動変換する方法(サンプルコード)」のご紹介 学び
スポンサーリンク

サクラエディタの便利機能マクロで「HTMLエスケープ文字を自動変換する方法(サンプルコード)」のご紹介

ご訪問ありがとうございます。
今回は、サクラエディタの便利機能マクロで「HTMLエスケープ文字を自動変換する方法(サンプルコード)」についてご紹介します。

サクラ大戦 | 中古・新品通販の駿河屋

エディタ関連サイトマップのご紹介

エディタ関連サイトマップをご紹介します。

エディタ関連サイトマップのご紹介エディタ関連サイトマップのご紹介
学び/学習TOP > IT|ゲーム作り|HP作成
IT > テキストエディタTop > サクラエディタ|正規表現
【サクラエディタ】 サクラエディタ基本|便利機能
基本
操作/ショットカットキー
機能別(一覧|ファイル操作系|編集系|カーソル移動系|選択系|矩形選択|クリップボード系|検索系|変換(文字変換|コード変換)|マクロ|設定系|ウィンドウ系|支援系|カスタムメニュー|挿入/モード切り替え系)
キーボード配置別(一覧|Alt|Ctrl|Ctrl+Alt||)
便利機能
矩形選択(使い方|ショートカット)|タブ設定|重複行削除/ソート機能|正規表現|文字変換|折り返し
マクロ
(作業手順|ショートカット割当|関数(一覧|記録可能|記録不可))
マクロサンプル文(HTMLエスケープ文字変換|)
【正規表現】正規表現
基本(特殊文字一覧|エスケープ必要文字)
検索文
(基本|電話番号|郵便番号|メールアドレス|URL|HTMLタグ|全角文字/半角文字|かっこ内文字検索|)
置換文
(空行を削除/追加|行頭/行末の空白を削除|行頭/行末に文字を追加| 二つの文字置換|文字を括弧で囲む|ある文字が含まれる行を削除|URLを分解|文字列の一部変更)
HTML関連(HTMLタグの削除|見出し行以外の削除|||)
サクラエディタ(改行置換|空行(改行/スペース/タブ)削除||)

■■│コペンギンTOP > ゲームホビー書籍・マンガ│■■
ゲームTOP > ランキング傑作・名作機種別ジャンル別
学び/学習TOP > IT|ゲーム作り|HP作成
ホビーTOP > プラモデルミリタリーエアガン
●映像>アニメ(ロボットアニメ)│映画│
書籍・マンガ > ゲーム雑誌マンガ

シューティングゲーム | ゲーム | 中古・新品通販の駿河屋

ホームページでHTMLコードを表示したい場合、エスケープ文字に注意

ホームページにコードを表示する場合、HTMLコードでは上手く表示できない場合があります。それはコードにエスケープ文字が混じっているためです。

例えば「<(不等号)」はHTMLの開始タグと認識される為、HTML構造が崩れてページ全体として表示が崩れる場合があります。「半角スペース」はHTML上は無視される為に文字が詰まって表示されます。

このようなHTML特殊記号をホームページで表示させるには特殊文字に変換しておく必要があります。

「HTMLエスケープ文字一覧」のご紹介

「HTMLエスケープ文字一覧」をご紹介します。

「HTMLコード:エスケープ文字一覧」のご紹介
記号 コード 意味
< &lt; 小なり
> &gt; 大なり
&#39;
シングルクォーテーション
&quot;
ダブルクォーテーション
& &amp;
アンパサンド(アンド)
&nbsp; 空白
¥ &yen; 日本円
¢ &cent; セント
£ &pound; ポンド
¦ &brvbar; 縦破線
© &copy; コピーライト
® &reg; 登録商標
° &deg; 気温を表す度
± &plusmn;
プラスマイナス
× &times; 掛け算の乗算
÷ &divide; 割り算の除算
µ &micro; マイクロ
· &middot; 中点
§ &sect; セクション
« &laquo; 左引用
» &raquo; 右引用
² &sup2; 上付き2
³ &sup3; 上付き3
¹ &sup1; 上付き1
¼ &frac14; 4分の1
½ &frac12; 2分の1
¾ &frac34; 4分の3

ホームページでコードを表示したい場合、特に特殊文字に変換しておく必要があるのは、

  • 「<(<)」 「>(>」
  • 「“(” ダブルクォーテーション」
  • 「&(& アンパサンド」
  • 「 (  空白」です。

ホームページでHTMLコードを表示する方法

簡単にホームページでHTMLコードを表示する方法は、2つあります。

1つ目は、オンラインのHTML特殊文字変換ツール」を利用して特殊文字を変換する方法、

HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited
HTML特殊文字の変換ツール。HTMLやコードをホームページに載せる時にHTML的に特殊な意味を持つ特殊文字を正常に表示されるように変換するツールです。

2つ目は、テキストエディタ(サクラエディタ)のマクロ機能を利用して変換する方法です。

サクラエディタのマクロ機能を利用すると簡単に文章全体を一括で変換するなど、柔軟な編集ができるようになります。

サクラエディタの便利機能マクロで「HTMLエスケープ文字を自動変換する方法」のご紹介

サクラエディタの便利機能マクロで「HTMLエスケープ文字を自動変換する方法」をご紹介します。

Web上での表示
見出し
コンテンツの中身を入力
変換前のコード
<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box">
  <div class="label-box-label block-box-label box-label">
    <span class="label-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="label-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>
変換後
""&lt;div&nbsp;class="wp-block-cocoon-blocks-label-box-1&nbsp;label-box&nbsp;block-box"&gt;
&nbsp;&nbsp;&lt;div&nbsp;class="label-box-label&nbsp;block-box-label&nbsp;box-label"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class="label-box-label-text&nbsp;block-box-label-text&nbsp;box-label-text"&gt;見出し&lt;/span&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class="label-box-content&nbsp;block-box-content&nbsp;box-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;コンテンツの中身を入力
&nbsp;&nbsp;&lt;/div&gt;
&lt;/div&gt;""

【基本編】サクラエディタ:マクロファイルの書き方と解説

サクラエディタで「HTMLエスケープ文字を自動変換する」には置換(正規表現)とそれを自動化するマクロ機能を利用します。

「マクロファイルコード」のご紹介
//キーボードマクロのファイル
ReplaceAll('&', '&amp;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('""', '&quot;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll(' ', '&nbsp;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('\\<', '&lt;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('\\>', '&gt;', 60);	// すべて置換
ReDraw(0);	// 再描画

HTMLコードを表示できるようにするには、下記の特殊文字に変換しておく必要があります。

  • 「<(<)」 「>(>」
  • 「“(” ダブルクォーテーション」
  • 「&(& アンパサンド」
  • 「 (  空白」
サクラエディタで文字を置換(正規表現)関数

サクラエディタで文字を置換(正規表現)するには、

ReplaceAll()関数

を利用します。

【SAKURA マクロ関数一覧】サクラエディタ:便利機能「キーマクロの関数一覧」のご紹介
サクラエディタ:便利機能「キーマクロの関数一覧」のご紹介ご訪問ありがとうございます。今回は、サクラエディタ:便利機能「キーマクロの関数一覧」をご紹介します。サクラ大戦 | 中古・新品通販の駿河屋サクラエディタ...

1つの置換作業は、

ReplaceAll('&', '&amp;', 60);	// すべて置換
ReDraw(0);	// 再描画

で完了します。後は、必要な置換項目を追加するだけです。

【SAKURA マクロ(自動化)】サクラエディタ:便利機能「キーマクロ繰り返し作業を簡単に自動化」のご紹介
サクラエディタ:便利機能「キーマクロ繰り返し作業を簡単に自動化」のご紹介ご訪問ありがとうございます。今回は、サクラエディタ:便利機能「キーマクロで記録できない関数一覧」をご紹介します。サクラ大戦 | 中古・新品通販の駿...
【SAKURA マクロショートカット割り当て】サクラエディタ:便利機能「登録済みマクロをショートカットキーに割り当てる方法」のご紹介
サクラエディタ:便利機能「登録済みマクロをショートカットキーに割り当てる方法」のご紹介ご訪問ありがとうございます。今回は、サクラエディタ:便利機能「登録済みマクロをショートカットキーに割り当てる方法」をご紹介します。サ...

【応用編】サクラエディタ:マクロファイルの書き方と解説

サクラエディタのマクロ機能を利用すれば、テキストで作成した文章内のコードを一括で変更することもできます。 ワードプレスの人気テーマ「Cocoon」を利用すれば

<pre><code>●</code></pre>

でコードを囲めば、簡単に表示することができます。

しかしHTMLコード場合「HTMLエスケープ文字を自動変換する」必要があり、変換したくない「<pre><code>●</code></pre>」と「変換したいHTMLコード」が混じっている場合があります。

<pre><code>を使用したコード表示
<pre><code>&lt;div class="wp-block-cocoon-blocks-label-box-1 label-box block-box"&gt;
  &lt;div class="label-box-label block-box-label box-label"&gt;
    &lt;span class="label-box-label-text block-box-label-text box-label-text"&gt;見出し&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="label-box-content block-box-content box-content"&gt;
    コンテンツの中身を入力
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

サクラエディタにマクロに置換を追加して解決

この場合、先程記述したコード変換に「<pre><code>●</code></pre>」のみ元のコードに変更するように追加記述します。

ReplaceAll('&lt;pre&gt;&lt;code&gt;', '<pre><code>', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('&lt;/code&gt;&lt;/pre&gt;', '</code></pre>', 60);	// すべて置換
ReDraw(0);	// 再描画
「マクロファイルコード」のご紹介
Down(0);	//&nbsp;カーソル下移動
ReplaceAll('&amp;',&nbsp;'&amp;amp;',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画
ReplaceAll('&quot;',&nbsp;'&amp;quot;',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画
ReplaceAll('&nbsp;',&nbsp;'&amp;nbsp;',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画
ReplaceAll('&lt;',&nbsp;'&amp;lt;',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画
ReplaceAll('&gt;',&nbsp;'&amp;gt;',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画
ReplaceAll('&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;',&nbsp;',<pre><code>',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画
ReplaceAll('&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;',&nbsp;',</code></pre>',&nbsp;60);	//&nbsp;すべて置換
ReDraw(0);	//&nbsp;再描画

【応用編】サクラエディタ:マクロファイルの書き方と解説「見出し変換」

HTMLの「見出し(<h3>~<h6>)」が含まれるコード表示したい文章のマクロファイルを作成してみました。

「HTMLエスケープ文字に自動変換」したくないコードは次の通りです。このコードを再変換する関数を追加記述します。

<pre><code></code></pre>
<h3>
</h3>
<h4>
</h4>
<h5>
</h5>
<h6>
</h6>
「マクロファイルコード」のご紹介

追加記述したマクロのファイルは以下の通りです。

//キーボードマクロのファイル
Down(0);	// カーソル下移動
ReplaceAll('&', '&amp;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('"', '&quot;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll(' ', '&nbsp;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('<', '&lt;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('>', '&gt;', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('&lt;pre&gt;&lt;code&gt;', '<pre><code>', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('&lt;/code&gt;&lt;/pre&gt;', '</code></pre>', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('&lt;h3&gt;', '<h3>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;/h3&gt;', '</h3>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;h4&gt;', '<h4>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;/h4&gt;', '</h4>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;h5&gt;', '<h5>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;/h5&gt;', '</h5>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;h6&gt;', '<h6>', 60); // すべて置換
ReDraw(0); // 再描画
ReplaceAll('&lt;/h6&gt;', '</h6>', 60); // すべて置換
ReDraw(0); // 再描画

エディタ関連サイトマップのご紹介

エディタ関連サイトマップをご紹介します。

エディタ関連サイトマップのご紹介エディタ関連サイトマップのご紹介
学び/学習TOP > IT|ゲーム作り|HP作成
IT > テキストエディタTop > サクラエディタ|正規表現
【サクラエディタ】 サクラエディタ基本|便利機能
基本
操作/ショットカットキー
機能別(一覧|ファイル操作系|編集系|カーソル移動系|選択系|矩形選択|クリップボード系|検索系|変換(文字変換|コード変換)|マクロ|設定系|ウィンドウ系|支援系|カスタムメニュー|挿入/モード切り替え系)
キーボード配置別(一覧|Alt|Ctrl|Ctrl+Alt||)
便利機能
矩形選択(使い方|ショートカット)|タブ設定|重複行削除/ソート機能|正規表現|文字変換|折り返し
マクロ
(作業手順|ショートカット割当|関数(一覧|記録可能|記録不可))
マクロサンプル文(HTMLエスケープ文字変換|)
【正規表現】正規表現
基本(特殊文字一覧|エスケープ必要文字)
検索文
(基本|電話番号|郵便番号|メールアドレス|URL|HTMLタグ|全角文字/半角文字|かっこ内文字検索|)
置換文
(空行を削除/追加|行頭/行末の空白を削除|行頭/行末に文字を追加| 二つの文字置換|文字を括弧で囲む|ある文字が含まれる行を削除|URLを分解|文字列の一部変更)
HTML関連(HTMLタグの削除|見出し行以外の削除|||)
サクラエディタ(改行置換|空行(改行/スペース/タブ)削除||)

■■│コペンギンTOP > ゲームホビー書籍・マンガ│■■
ゲームTOP > ランキング傑作・名作機種別ジャンル別
学び/学習TOP > IT|ゲーム作り|HP作成
ホビーTOP > プラモデルミリタリーエアガン
●映像>アニメ(ロボットアニメ)│映画│
書籍・マンガ > ゲーム雑誌マンガ

シューティングゲーム | ゲーム | 中古・新品通販の駿河屋

テキストエディタ関連ページのご紹介

テキストエディタ関連ページをご紹介します。

サクラエディタ関連のご紹介|まとめ

【SAKURA Editor 】サクラエディタ関連のご紹介|まとめ
サクラエディタ関連のご紹介|まとめご訪問ありがとうございます。今回は、サクラエディタ関連についてご紹介します。サクラ大戦 | 中古・新品通販の駿河屋サクラエディタ 基本操作のご紹介|まとめサクラエディタ...

正規表現関連のご紹介|まとめ

正規表現関連のご紹介|まとめ
正規表現関連のご紹介|まとめご訪問ありがとうございます。今回は、正規表現についてご紹介します。シュタインズゲート | 中古・新品通販の駿河屋「正規表現の基本(特殊文字/エスケープ文字など)」のご紹介|まとめ...

「学ぶ」学習用関連サイトマップのご紹介

「学ぶ」学習用関連サイトマップをご紹介します。

「東亜プラン」シューティングゲーム関連サイトマップのご紹介
「学ぶ」学習用関連サイトマップのご紹介
学び/学習TOP > IT|ゲーム作り|HP作成
ITエディタ/正規表現|プログラミング|
ゲーム作りSTG作り方|C言語の入門/基礎|リファレンス/サンプル文
HP作成WordPress|Cocoon|便利テクニック

■■│コペンギンTOP > ゲームホビー書籍・マンガ│■■
ゲームTOP > ランキング傑作・名作機種別ジャンル別
学び/学習TOP > IT|ゲーム作り|HP作成
ホビーTOP > プラモデルミリタリーエアガン
●映像>アニメ(ロボットアニメ)│映画│
書籍・マンガ > ゲーム雑誌マンガ

シューティングゲーム | ゲーム | 中古・新品通販の駿河屋

「学ぶ」学習用関連ページのご紹介

「学ぶ」学習用関連ページをご紹介

コペンギン・サイトマップ

コペンギンのサイトマップをご紹介します。

コペンギンTOP】サイトマップ
コペンギンTOP > ゲームホビー書籍・マンガ

■■│コペンギンTOP > ゲームホビー書籍・マンガ│■■
ゲームTOP > ランキング傑作・名作機種別ジャンル別
学び/学習TOP > IT|ゲーム作り|HP作成
ホビーTOP > プラモデルミリタリーエアガン
●映像>アニメ(ロボットアニメ)│映画│
書籍・マンガ > ゲーム雑誌マンガ

サイトマップ一覧

ゲーム・古本・DVD・CD・トレカ・フィギュア 通販ショップの駿河屋
懐かしの名作から最新作までの豊富な品揃え!通販ショップの駿河屋

コペンギンサイトマップ関連ページのご紹介

コペンギン関連ページをご紹介します。

【ゲームTOP】ゲーム関連ページのご紹介

【ゲームTOP】ゲーム関連ページのご紹介
【TOP】ゲーム関連ページのご紹介ご訪問ありがとうございます。今回は、ゲーム関連ページをご紹介します。PS5ソフトELDEN RING

【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介

【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介
書籍・雑誌サイトマップ関連ページのご紹介ご訪問ありがとうございます。今回は、書籍・雑誌サイトマップ関連ページをご紹介します。その他コミック初版)AKIRA(デラックス版) 全6巻セット / 大友克洋

【ホビーTOP】ホビーサイトマップ関連ページのご紹介

【ホビーTOP】ホビーサイトマップ関連ページのご紹介
【TOP】ホビーサイトマップ関連ページのご紹介ご訪問ありがとうございます。今回は、ホビーサイトマップ関連ページをご紹介します。プラモデル1/100 MG MS-09 ドム 「機動戦士ガンダム」
タイトルとURLをコピーしました