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

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

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

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

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

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

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

学び/学習TOP > IT|ゲーム作り|HP作成|クラウド(エディタ|コードエディタ)

IT > 開発ツールTop > |サクラエディタ|正規表現

【サクラエディタ】基本|便利機能|マクロ

■基本 サクラエディタとは|操作/ショットカットキー 機能別(一覧|ファイル操作系|編集系|カーソル移動系|選択系|矩形選択|クリップボード系|検索系|変換(文字変換|コード変換)|マクロ|設定系|ウィンドウ系|支援系|カスタムメニュー|挿入/モード切り替え系) キーボード配置別(一覧|Alt|Ctrl|Ctrl+Alt||)

■便利機能 矩形選択(使い方|ショートカット)|タブ設定|重複行削除/ソート機能|正規表現|文字変換|折り返し

■マクロ マクロ機能とは|キーマクロ| 作業手順|ショートカット割当|関数(一覧|記録可能|記録不可|マクロサンプル文(HTMLエスケープ文字変換)

【関連】

正規表現(基礎|ツール|検索文|置換文)|人工知能|開発ツール|プログラミング|

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

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

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

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

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

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

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

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

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

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

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

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

HTML特殊文字変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited

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

tech-unlimited.com

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>

変換後

""<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>""

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

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

「マクロファイルコード」のご紹介

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

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

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

サクラエディタで文字を置換(正規表現)関数

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

ReplaceAll()関数

を利用します。

【SAKURA マクロ関数一覧】サクラエディタ：便利機能「キーマクロの関数一覧」のご紹介

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

kopenguin.com

2023.06.17

1つの置換作業は、

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

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

【SAKURA マクロ(自動化)】サクラエディタ：便利機能「キーマクロ繰り返し作業を簡単に自動化」のご紹介

サクラエディタ：便利機能「キーマクロ繰り返し作業を簡単に自動化」のご紹介 ご訪問ありがとうございます。 今回は、サクラエディタ：便利機能「キーマクロで記録できない関数一覧」をご紹介します。 サクラ大戦 | 中古・新品通販の駿河屋 サクラエデ...

kopenguin.com

2023.06.18

【SAKURA マクロショートカット割り当て】サクラエディタ：便利機能「登録済みマクロをショートカットキーに割り当てる方法」のご紹介

サクラエディタ：便利機能「登録済みマクロをショートカットキーに割り当てる方法」のご紹介 ご訪問ありがとうございます。 今回は、サクラエディタ：便利機能「登録済みマクロをショートカットキーに割り当てる方法」をご紹介します。 サクラ大戦 | 中...

kopenguin.com

2023.06.17

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

サクラエディタのマクロ機能を利用すれば、テキストで作成した文章内のコードを一括で変更することもできます。 ワードプレスの人気テーマ「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);	// カーソル下移動
ReplaceAll('&', '&', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('"', '"', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll(' ', ' ', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('<', '<', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('>', '>', 60);	// すべて置換
ReDraw(0);	// 再描画
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('&', '&', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll('"', '"', 60);	// すべて置換
ReDraw(0);	// 再描画
ReplaceAll(' ', ' ', 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エスケープ文字変換)

【関連】

正規表現(基礎|ツール|検索文|置換文)|人工知能|開発ツール|プログラミング|

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

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

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

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

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

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

kopenguin.com

2023.06.16

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

「正規表現」関連ページのご紹介|まとめ

「正規表現」関連ページのご紹介|まとめ ご訪問ありがとうございます。 今回は、正規表現関連ページをご紹介します。

kopenguin.com

2023.06.15

開発ツール関連サイトマップのご紹介

開発ツール関連サイトマップをご紹介します。

開発ツール関連サイトマップのご紹介

学び/学習TOP > IT|ゲーム作り|HP作成|クラウド(エディタ|コードエディタ)

IT > 開発ツールTop > |サクラエディタ|正規表現

【開発ツールランキング】

■世界の開発者が最も利用しているランキング AI検索ツール|AI開発ツール|開発ツール|開発環境ツール|プロジェクト管理|チームコミュニケーションツール|

【開発ツール】

■エディタ/ターミナル 歴史(コードエディタ|クラウドエディタ|AI実装エディタ|オープンソースエディタ)|マクロ機能| テキストエディタ サクラエディタ(基本|便利機能|マクロ)|MIFES|Notepad++ (概要|マクロ|プラグイン)| 補助ツール　コマンド系|PowerShell||| AIツール利用(|||Vim|||) ■PowerShell 歴史|補助ツール|スクリプト作成ツール|ISE/VSコード比較|NuGet|モジュール|拡張機能ツール|VS Code環境| ■Visual Studioコード 歴史|バージョン|開発チーム(ボブ・キャッツ|||)|| 拡張機能 Azure CLI|Azure PowerShell|PowerShell|コマンドプロンプト|Bash/PowerShell/Terminal比較 AIツール(生成・補完||)|| プログラミング言語 Python(テキストエディタ)|

【サクラエディタ】基本|便利機能|マクロ

■基本 サクラエディタとは|操作/ショットカットキー 機能別(一覧|ファイル操作系|編集系|カーソル移動系|選択系|矩形選択|クリップボード系|検索系|変換(文字変換|コード変換)|マクロ|設定系|ウィンドウ系|支援系|カスタムメニュー|挿入/モード切り替え系) キーボード配置別(一覧|Alt|Ctrl|Ctrl+Alt||) ■便利機能 矩形選択(使い方|ショートカット)|タブ設定|重複行削除/ソート機能|正規表現|文字変換|折り返し ■マクロ マクロ機能とは|キーマクロ| 作業手順|ショートカット割当|関数(一覧|記録可能|記録不可|マクロサンプル文(HTMLエスケープ文字変換)

【正規表現】基礎|ツール|検索文|置換文

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

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

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

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

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

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

kopenguin.com

2023.06.16

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

「正規表現」関連ページのご紹介|まとめ

「正規表現」関連ページのご紹介|まとめ ご訪問ありがとうございます。 今回は、正規表現関連ページをご紹介します。

kopenguin.com

2023.06.15

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

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

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

学び/学習TOP > IT|ゲーム作り|HP作成

【IT】エディタ/正規表現|プログラミング| 【ゲーム作り】STG作り方|C言語の入門/基礎|リファレンス/サンプル文 【HP作成】WordPress|Cocoon|便利テクニック

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

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

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

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

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

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

懐かしの名作から最新作までの豊富な品揃え！通販ショップの駿河屋

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

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

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

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

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

kopenguin.com

2022.03.15

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

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

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

kopenguin.com

2022.03.15

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

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

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

kopenguin.com

2022.03.15