とあるシステムに登場する複数のWEB画面のあいだで、見出しやボタンの表示文字列を統一させたい場合に、私が使う手法のひとつがこれです。
いろんな方が、これと同じような手法をとられていると思います。かな？
サンプル
JavaScript側からです。これを各HTMLにインクルードして使います。
// JavaScript
function label_print () {
var arrVar = {
label_lastname: "姓",
label_firstname: "名",
label_birthday: "生年月日",
};
var arrVarButton = {
button_save: "保存",
button_cancel: "キャンセル",
};
for (let key in arrVar) {
if(document.getElementById(key) != null) {
$('#' + key).html(arrVar[key]);
}
}
for (let key in arrVarButton) {
if(document.getElementById(key) != null) {
$('#' + key).val(arrVarButton[key]);
}
}
}
HTML側です。
<!-- HTML -->
...
<body class="" onload="label_print();">
...
<td class="label" style="white-space: nowrap;">
<div id="label_lastname"></div>
</td>
...
サーバ・サイドで、データベースなどを用いて処理する手法もあったり、いろんな手法があっていずれも賛否両論だと思います。上記はレガシーで単純、必要なパーツも少なく取り回しが楽ですね。Simple is best.