[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ボタン

和空間・積集合の次元

\[ \dim W_{1}+\dim W_{2}=\dim\left(W_{1}+W_{2}\right)+\dim\left(W_{1}\cap W_{2}\right) \]

ベクトル空間の次元の定義

ベクトルの基底と成分の変換

\[ \left(\boldsymbol{y}_{1},\boldsymbol{y}_{2},\cdots,\boldsymbol{y}_{n}\right)=\left(\boldsymbol{x}_{1},\boldsymbol{x}_{2},\cdots,\boldsymbol{x}_{n}\right)P \]

ベクトルの基底に関する成分

\[ \boldsymbol{v}=\left(\boldsymbol{v}_{1},\boldsymbol{v}_{2},\cdots,\boldsymbol{v}_{n}\right)\left(\begin{array}{c} a_{1}\\ a_{2}\\ \vdots\\ a_{n} \end{array}\right) \]