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

べき等行列の性質

べき等行列はユニタリ行列で対角化が可能である。

べき零行列の性質

べき零行列$N$は正則ではない。

同次連立1次方程式の定義と性質

\[ A\boldsymbol{x}=\boldsymbol{0} \]

連立1次方程式と拡大係数行列の定義と性質

\[ \left(A,\boldsymbol{b}\right)=\left(\begin{array}{cccc|c} a_{11} & a_{12} & \cdots & a_{1n} & b_{1}\\ a_{21} & a_{22} & \cdots & a_{2n} & b_{2}\\ \vdots & \vdots & \ddots & \vdots & \vdots\\ a_{m1} & a_{m2} & \cdots & a_{mn} & b_{m} \end{array}\right) \]