BASEから読み込んだ文章をJavaScriptで扱う場合

BASEやShopify、MakeShopなどECサイトプラットフォームでは、HTMLのカスタマイズ用のパラメータが準備されており設定画面から登録したデータなどが扱えるようになっています。今回は、BASEを例に設定画面から登録した文章などをJavaScriptなどで扱う場合には工夫が必要なので、そのメモ書きとなります。

BASEのデザインオプションについて
- 具体的な例
対処の考え方
対処の方法
- 改行を<br />に置き換える操作

BASEのデザインオプションについて

BASEのデザインオプションでは、設定された｢文章｣を読み込んでECサイトに反映する事ができます。そのままHTML文の中に埋め込まれる分には問題はないのですが、これをJavaScriptなどを使って変数に格納して利用しようとすると、その文章内に改行が入っているような場合、JavaScriptではシンタックスエラーとなります。

｢BASEのデザインオプション｣
https://docs.thebase.in/docs/template/syntax/designoption

具体的な例

BASEの｢カスタムHTML｣で以下のような設定パラメータを設け、BASEの｢カスタムHTML｣の設定画面からデータが設定された場合、そのデータ(文章)に改行付きで入っている場合、起こり得ます。

<meta name="text:CategoryDescription" content="" label="カテゴリの詳細説明">

1	<meta name="text:CategoryDescription" content="" label="カテゴリの詳細説明">

｢カスタムHTML｣で設定されたデータの取得は、上記の場合ですと、以下で取得できます。
{text:CategoryDescription}

この取得したデータが例えば、改行付きで以下のような文言の場合、JavaScriptで扱おうとすると当然ですが、シンタックスエラーとなります。

“スマートフォンが益々便利になる一方で、こんな事は感じませんか。
集中できない。
生活習慣の乱れ。
コミュニケーションの阻害。
デジタルデトックスとは、現実世界でのコミュニケーションや、
自然とのつながりにフォーカスしようという取り組みです。”

JavaScript(jQuery)

<script >
var categoryDescription = "{text:CategoryDescription}";

shtml = '<div>'+categoryDescription+'</div>';
jQuery('#insertDescription').html(shtml);
</script>

1

2

3

4

5

6

var categoryDescription = "{text:CategoryDescription}";

shtml = '<div>'+categoryDescription+'</div>';

jQuery('#insertDescription').html(shtml);

</script>

上記ソースの場合、設定されたデータを変数に入れようとしたところでシンタックスエラー(以下参照)となります。

var categoryDescription = “スマートフォンが益々便利になる一方で、こんな事は感じませんか。
集中できない。
生活習慣の乱れ。
コミュニケーションの阻害。
デジタルデトックスとは、現実世界でのコミュニケーションや、
自然とのつながりにフォーカスしようという取り組みです。”;

対処の考え方

取得した値の改行を取り除けば解決はできますが、当然、意図的に入れた改行を無視してしまうので、根本解決にはなりません。そのため、解決するための考え方としては、本文章をコメントアウトしシンタックスエラーを回避した上で、コメントアウトが入っているものとして操作し、<br>の改行を入れるなどすれば解決できます。

以下の様なイメージです。

var categoryDescription = "/*{text:CategoryDescription}*/";

1	var categoryDescription = "/{text:CategoryDescription}/";

↓

var categoryDescription = “/*スマートフォンが益々便利になる一方で、こんな事は感じませんか。
集中できない。
生活習慣の乱れ。
コミュニケーションの阻害。
デジタルデトックスとは、現実世界でのコミュニケーションや、
自然とのつながりにフォーカスしようという取り組みです。*/“;

コメントアウトされるので、シンタックスエラーとならない。

対処の方法

コメントアウトした文章を、toString.matchの正規化表現で/* */の間の文章を取得し、さらに、replace関数を使って改行(/r/n)を取り除き、<br />に置き変えるなどの操作をすれば解決できます。

改行を<br />に置き換える操作

var categoryDescription = (function(){/*{text:CategoryDescription1}*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\n|\r/g, "<br />");

1	var categoryDescription = (function(){/{text:CategoryDescription1}/}).toString().match(/[^]\/\([^])\\/\}$/)[1].replace(/\n\|\r/g, "<br />");

↓

var categoryDescription = (function(){/*スマートフォンが益々便利になる一方で、こんな事は感じませんか。
集中できない。
生活習慣の乱れ。
コミュニケーションの阻害。
デジタルデトックスとは、現実世界でのコミュニケーションや、
自然とのつながりにフォーカスしようという取り組みです。*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\n|\r/g, “<br />”);

これで解決できます。