備忘録 テキストの前後の半角スペースがトリミングされることに対する対処
問題点
ゲームブックの各テキストの前後に半角スペースがあると、表示時に無視される。
これは通常のHTMLファイルを書いた時でもタグの間（例えば<td>と</td>）に書いたスペースや改行と同じように扱われている事を意味する。
対処法
例えば、半角スペースを" "と記述してinnerHTMLとしてバインディングする事は可能である。
Angularとしての記述例は下記の通り
<div [innerHTML]="htmlStr"></div>
多少解説すると、.ts側で"htmlStr"と言う変数を定義し、表示時に値をセットするという事です。
例えば、htmlStr=" てすと"
参考サイト
Angular で innerHTML プロパティ バインディングを使用する方法
https://ja.linux-console.net/?p=5384#gsc.tab=0
ただ、セキュリティを考えると（その辺りも上のサイトに記述されてます）あまりとりたい方法ではない。
現状は対応しない方向で考えています。
2023年6月22日午前3時26分
と思っていたのですが、突然、解決法が思いつきました。
多分、方法としてはありふれたものですので思いつかなかったことを恥じるべきかもですが、半角スペースだけでなくhtmlタグの両端の文字"<"と">"も特殊文字コードにすればセキュリティ対策になります。
//"<"と">"、" "を特殊文字コードに変換
fnSafeString(str:String){
const regex1 = /</g;
const regex2 = />/g;
const regex3 = / /g;
return str.replace(regex1,"<").replace(regex2,">").replace(regex3," ")
}
regex1, regex2, regex3は正規表現と言う奴ですね。この関数を使って
<table>
<tr>
<td [innerHTML]="strTestAbout">
</td>
</tr>
<tr>
<td [innerHTML]="fnSafeString(strTestAbout)">
</td>
</tr>
</table>
<ion-item>
<ion-textarea label="Regular textarea" placeholder="Type something here" [(ngModel)]="strTestAbout"></ion-textarea>
</ion-item>
と言う感じで書くと、一番下のテキストエリアに入力された"strTestAbout"と言う名前の変数をそのまま表示とと"fnSafeString"関数を通した表示の二つのケースが比較できます。
うまく動作する事を確認できました。
めでたしめでたし
