[javascript]テキストエリアのカーソル位置に挿入・選択範囲をタグで囲う

by nomura · 2024年12月15日

テキストエリアのカーソル位置に挿入・選択範囲をタグで囲う

まずは選択範囲を無視して現在のテキストエリアのカーソルの位置に挿入するようにしてみます。

<html>
<body>
	<script>
		function insert(str) {
			let input = document.getElementById('text_area');
			//テキストエリアに入力されている文字数
			let length = input.length;
			let position = text_area.selectionStart;
			let before = input.value.substring(0, position);
			let after = input.value.substring(position, input.length);
			input.value = before + str + after;
		}
	</script>
	<textarea id="text_area" rows="5" cols="40">あいうえおかきくけこさしすせそ</textarea>
	<button type="button" onclick="insert('[ABC]')">カーソル位置に[ABC]を挿入</button>
</body>
</html>

次に選択範囲も考慮して挿入やタグなどで囲うようにしてみます。

<html>
<body>
	<script>
		function insert(str) {
			let input = document.getElementById('text_area');
			let input_length = text_area.value.length;
			let select_1 = text_area.selectionStart;
			let select_2 = text_area.selectionEnd;
			//選択範囲より前
			let before = text_area.value.substring(0, select_1);
			//選択範囲より後
			let after = text_area.value.substring(select_2, input_length);
			//選択範囲
			let select_value = text_area.value.substring(select_1, select_2);
			if (str.match(/\?/)) {
				select_value = str.replace(/\?/g, select_value);
			} else {
				select_value = str;
			}
			text_area.value = before + select_value + after;
		}
	</script>
	<textarea id="text_area" rows="5" cols="40">あいうえおかきくけこさしすせそ</textarea>
	<button type="button" onclick="insert('[ABC]')">選択範囲に[ABC]を挿入</button>
	<button type="button" onclick="insert('[[?]]')">選択範囲を[[と]]で囲む</button>
</body>
</html>

ページ情報

タイトル	[javascript]テキストエリアのカーソル位置に挿入・選択範囲をタグで囲う
URL	https://www.nomuramath.com/tjw53eoc/
SNSボタン

ベクトル空間の線形同型写像・線形同型の定義と性質

線形写像$f$が全単射であるとき、線形同型写像という。

線形写像の合成写像と像

$f$が全射であるとき、$\im\left(g\circ f\right)=\im g$となる。

線形写像の全射・単射と像・核と次元

単射であることと、$\ker f=\left\{ \boldsymbol{0}\right\} $となることは同値である。

線形写像・行列における次元定理

\[ \dim V=\dim\im f+\dim\ker f \]