angiodianxin · December 23, 2022 03:45
diff --git a/yurugoji.html b/yurugoji.html
 <html>

 <head>
    <title>言語沼の誤字を再現・復元するツール</title>
    <script>
        cidText =
            '　０１２３４５６７８９ぁあぃいぅうぇえぉおかゕがきぎくぐけゖげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんゔぁぃぅぇぉゕゖっゃゅょゎァアィイゥウェエォオカヵガキギクグケヶゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴｧｨｩｪｫヵヶｯｬｭｮヮー｜';

        function shiftCodePoint(text, d) {
            return [...text].map((c) => {
                idx = cidText.indexOf(c);
                console.log(c, idx);
                if (idx > 0) {
                    return cidText[idx + d];
                } else {
                    return c;
                }
            }).join('');
        }

        function miss() {
            var text = document.getElementById("tarea").value;
            var missed = shiftCodePoint(text, -2)
            document.getElementById("farea").value = missed;
        }

        function correct() {
            var text = document.getElementById("farea").value;
            var corrected = shiftCodePoint(text, 2)
            document.getElementById("tarea").value = corrected;
        }
    </script>
    <style>
        .container {
            display: grid;
            max-width: 800px;
            height: 20rem;
            grid-template-rows: 1fr 1fr;
            grid-template-columns: 1fr 8rem 1fr;
        }

        .container * {
            font-size: 1.5rem;
        }

        #tarea {
            grid-row: 1/3;
            grid-column: 1;
        }

        #mbutton {
            grid-row: 1;
            grid-column: 2;
        }

        #cbutton {
            grid-row: 2;
            grid-column: 2;
        }

        #farea {
            grid-row: 1/3;
            grid-column: 3;
        }
    </style>
 </head>

 <body>
    <div class="container">
        <textarea name="tarea" id="tarea" cols="30" rows="10">ゆるげんごがくラジオ</textarea>
        <input type="button" id="mbutton" value="誤植化 ▶" onclick="miss()">
        <input type="button" id="cbutton" value="◀ 復元" onclick="correct()">
        <textarea name="farea" id="farea" cols="30" rows="10"></textarea>
    </div>
 </body>

 </html>
	<html>

	<head>
	<title>言語沼の誤字を再現・復元するツール</title>
	<script>
	cidText =
	'　０１２３４５６７８９ぁあぃいぅうぇえぉおかゕがきぎくぐけゖげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんゔぁぃぅぇぉゕゖっゃゅょゎァアィイゥウェエォオカヵガキギクグケヶゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴｧｨｩｪｫヵヶｯｬｭｮヮー｜';

	function shiftCodePoint(text, d) {
	return [...text].map((c) => {
	idx = cidText.indexOf(c);
	console.log(c, idx);
	if (idx > 0) {
	return cidText[idx + d];
	} else {
	return c;
	}
	}).join('');
	}

	function miss() {
	var text = document.getElementById("tarea").value;
	var missed = shiftCodePoint(text, -2)
	document.getElementById("farea").value = missed;
	}

	function correct() {
	var text = document.getElementById("farea").value;
	var corrected = shiftCodePoint(text, 2)
	document.getElementById("tarea").value = corrected;
	}
	</script>
	<style>
	.container {
	display: grid;
	max-width: 800px;
	height: 20rem;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 8rem 1fr;
	}

	.container * {
	font-size: 1.5rem;
	}

	#tarea {
	grid-row: 1/3;
	grid-column: 1;
	}

	#mbutton {
	grid-row: 1;
	grid-column: 2;
	}

	#cbutton {
	grid-row: 2;
	grid-column: 2;
	}

	#farea {
	grid-row: 1/3;
	grid-column: 3;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<textarea name="tarea" id="tarea" cols="30" rows="10">ゆるげんごがくラジオ</textarea>
	<input type="button" id="mbutton" value="誤植化 ▶" onclick="miss()">
	<input type="button" id="cbutton" value="◀ 復元" onclick="correct()">
	<textarea name="farea" id="farea" cols="30" rows="10"></textarea>
	</div>
	</body>

	</html>