intra-mart の FormaDesigner を使用していると,セレクトボックスの表示値に含まれるゼロ幅スペース(Zero-width space)に悩まされたことはないだろうか。気づかずに画面から Excel にコピー&ペーストしたり,JavaScript で値を取得したりすると後々トラブルの原因となる。
起きている現象
セレクトボックスで「総務部」を選択した場合,HTMLのソースを確認すると「総​務​部」のようにゼロ幅スペースが含まれている。
やりたいこと
アクション設定(カスタムスクリプト)で,セレクトボックスの表示値を他の項目に転記する際、表示値に含まれるゼロ幅スペースを除去したい。
セレクトボックスの選択値を取得する方法
intra-mart の FormaDesigner では,セレクトボックスの選択値を以下のコードで取得できる。なお,この方法で取得できる値は,表示値(表示されている文字列)でなく,送信値(データベースに登録する値)となることに注意したい。
■ セレクトボックスの選択値を取得(サンプル)
let result = formaItems.product_80_selectbox.getItemData.%フィールド識別ID%();
表示値を取得するには……
表示されている文字列を取得したい場合は,getElementsByName() メソッドでセレクトボックスの NodeList コレクションを取得し,NodeList コレクション内の HTMLSelectElement から選択されている文字列を取得する手順が必要となる。
let elements = document.getElementsByName("%フィールド識別ID%");
let element = elements.item(0);
let result = element.options[element.selectedIndex].text;
厄介なことに,取得したセレクトボックスの表示値には意図しない文字列が含まれることがある。例えば,セレクトボックスから取得した表示値を,隠し項目にセットしたとする。Chrome の検証ツールを表示した状態で,セレクトボックスから「総務部」を選択すると,隠し項目に「総​務​部」と設定されることがわかるだろう。
ゼロ幅スペースを削除する
この「​」はゼロ幅スペースという特殊文字の一種で,視覚的に見ることができない。もちろん,視覚的には見ることができないだけで,ゼロ幅スペースは確実に存在するのでトラブルの原因となる。勘の良い読者ならお気付きかと思うが,データベースに保存する際はゼロ幅スペースも一緒に登録されてしまう。
そのため,セレクトボックスから他の項目に表示値を転記するときは,ゼロ幅スペースを削除することをおすすめする。ゼロ幅スペースを JavaScript でエスケープすると「\u200B」になる。replace() メソッドを使用して,「\u200B」を空文字に置き換えることでゼロ幅スペースを削除できる。
■ ゼロ幅スペースの削除(サンプル)
window.delZeroWidthSpace = {};
window.delZeroWidthSpace = function(txtBefore) {
let zwsp = /\u200B/g;
let txtAfter = txtBefore.replace(zwsp, "");
return txtAfter;
}