1.背景
JSPの実装にて入力フォームに入力した絵文字を次ページの確認画面で表示する際に
数値変換形式に変換されてしまうため、絵文字で表示をするためにJavaScrpitにて処理を実装しました。
例：入力内容→😃
数値変換形式→ ＆#128515;
上記を表示時に、😃へ戻す
2. 入力画面、受け取り画面について
以下は入力テキストとPOSTするボタンのみ配置の画面
inputForm.jsp
<%@ page contentType="text/html; charset=Windows-31J" %>
<html>
<head>
<title>送信データを扱うJSP</title>
</head>
<body onload="document.getElementById('hiddenButton').click();">
<h2>POST送信フォーム</h2>
<form action="jspReceipt.jsp" method="post">
入力：
<input type="text" name="htmlEntity" id="htmlEntity">
<input type="submit" value="送信">
</form>
</body>
</html>
以下は入力された内容を表示する画面
jspReceipt.jsp
<%@ page contentType="text/html; charset=Windows-31J" %>
<%
// POSTされた絵文字
String htmlEntity = request.getParameter("htmlEntity");
%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="emojiHenkan.js"></script>
<script type="text/javascript">
// ページがロードされた後に処理を行う
window.addEventListener('load', function() {
// 初期表示時に関数を呼び出す
replaceNumericReferenceWithEmoji('<%= htmlEntity %>');
});
</script>
<meta charset="UTF-8">
<title>入力内容の表示</title>
</head>
<body>
<div id="outputDiv"></div>
<br/>
</body>
</html>
3. 変換処理を行うJavaScript
以下、数値変換形式と絵文字をセットの配列を作成して、入力された内容に対して最終的に置換を行う。
emojiHenkan.js
// 数値参照形式から絵文字に変換する非同期関数
async function convertNumericReferenceToEmoji(numericReference) {
return new Promise((resolve, reject) => {
// 数値形式部分を取り出す
var numericParts = numericReference.match(/&#(\d+);/g);
if (!numericParts) return resolve([]);
var emojis = numericParts.map(function(numericPart) {
// 数字を10進数として解釈し、絵文字に変換
var codePoint = parseInt(numericPart.replace(/[&#;]/g, ''), 10);
return String.fromCodePoint(codePoint);
});
// numericPartsとemojisをセットにした配列を作成
var pairedArray = numericParts.map(function(numericPart, index) {
return [numericPart, emojis[index]];
});
resolve(pairedArray);
});
}
// 数値参照形式を絵文字に置き換える関数
async function replaceNumericReferenceWithEmoji(htmlEntity) {
try {
var pairedArray = await convertNumericReferenceToEmoji(htmlEntity);
// 数値参照形式を絵文字に置き換える
var replacedText = htmlEntity;
pairedArray.forEach(function(pair) {
replacedText = replacedText.replace(pair[0], pair[1]);
});
// 置換されたテキストを画面に表示
document.getElementById("outputDiv").innerHTML = replacedText;
} catch (error) {
console.error('Error:', error);
}
}
４. 終わりに
今回は入力画面も表示画面も、仕様上の誤動作のリスクに備えて、UTF-8には変換できず、Windows-31Jのままで使用することがあったため、JavaScriptで無理やり変換しております。
JavaでUTF-8に変換して表示させる方法では文字化けが解消されず、StringEscapeUtils.unescapeHtml4では、SQLインデクションを解消できず、やめました。
上記は割と自作になるのでご使用の際はご注意を。