<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selection/1.0.1/jquery.selection.js"></script></script>
<script type="text/javascript">
$(function(){
$("#text")
.css({
float: "left",
width: "400px",
height: "200px"
});
$("#insert1")
.attr("type", "button")
.val("前へ挿入")
.css({
display: "block"
})
.click(function(){
$("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" })
});
$("#insert2")
.attr("type", "button")
.val("後へ挿入")
.css({
display: "block"
})
.click(function(){
$("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" })
});
$("#replace")
.attr("type", "button")
.val("置き換え")
.css({
display: "block"
})
.click(function(){
$("#text").selection("replace",{ text: "文字列", caret: "keep" })
});
$("#get")
.attr("type", "button")
.val("取り出し")
.css({
display: "block"
})
.click(function(){
alert( $("#text").selection("get") )
});
$("#get_text")
.attr("type", "button")
.val("選択部分の text 取り出し")
.css({
display: "block"
})
.click(function(){
alert( $.selection("text") )
});
$("#get_html")
.attr("type", "button")
.val("選択部分の html 取り出し")
.css({
display: "block"
})
.click(function(){
alert( $.selection("html") )
});
});
</script>
<b>ここを選択して <span>html</span> 取り出しすると</b><br><br>
<textarea id="text">aaa
bbb
ccc</textarea>
▼ テキストエリア内限定
<input id="insert1">
<input id="insert2">
<input id="replace">
<input id="get">
▼ ページ全体に対しての処理
<input id="get_text">
<input id="get_html">
ここを選択して html 取り出しするとテキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。 使用可能なメソッドは 5つ 1) getPos 2) setPos 3) insert 4) replace 5) get get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。 insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。 ページ全体で使用可能 selection メソッド こちらは、text か html かで選択部分の情報を取得します
▼ テキストエリア内限定 ▼ ページ全体に対しての処理
関連する記事 ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
