JavaScript 是一種功能強大的編程語言，在開發 Web 應用程序時可以實現很多非常有用的功能。其中一個常見的功能是在頁面中獲取和操作光標位置，以及在指定位置插入文本或其他元素內容。下面我們就來詳細討論這個話題。

如果您希望從頁面中獲取光標當前所在的位置，可以使用類似下面的代碼：

function getCaretPosition(element) {
var caretOffset = 0;
var sel;
var range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == element) {
caretOffset = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == element) {
var tempEl = document.createElement("span");
element.insertBefore(tempEl, element.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretOffset = tempRange.text.length;
element.removeChild(tempEl);
}
}
return caretOffset;
}

在這個函數中，我們獲取了當前文本選擇的范圍（如果存在），并檢查選中的范圍是否在指定的元素內部。如果是，我們就返回光標所在位置的偏移量。

使用這個函數，您可以在 JavaScript 代碼中動態地確定光標的位置。例如，如果您希望在用戶輸入的文本框中插入一些內容（比如，添加一個表情符號），您可以使用類似下面的代碼：

function insertTextAtCaret(text, element) {
var position = getCaretPosition(element);
var value = element.value;
element.value = value.substr(0, position) + text + value.substr(position);
}

在這個代碼段中，我們獲取當前文本框中光標的位置并保存到變量中。然后，我們使用當前文本框的值來構造新的文本字符串，通過插入文本來修改當前文本框的值。

當然，如果您使用的是富文本編輯器，這個過程可能會更加復雜一些。在這種情況下，您需要讀取當前光標所在的節點，并在其中插入新的元素（比如，新的圖片或其他媒體元素）。為了完成這個任務，您可以使用類似下面的代碼：

function insertElementAtCaret(element, container) {
var position = getCaretPosition(container);
var range = window.getSelection().getRangeAt(0);
var sel = window.getSelection();
range.setStart(sel.focusNode, position);
range.setEnd(sel.focusNode, position);
range.insertNode(element);
}

在這個函數中，我們首先獲取當前光標的位置，然后獲取當前文本選擇的范圍。我們使用范圍對象來設置新插入元素的起始位置和結束位置，然后使用insertNode()方法將新插入的元素添加到當前文本選擇范圍內。

在使用這個函數時，您需要確保當前文本選擇范圍與所需容器元素的范圍相同。否則，新元素可能會插入到錯誤的位置或完全忽略。

總之，JavaScript 可以讓您在頁面中輕松地獲取和操作光標位置。無論是在文本框、富文本編輯器還是其他 DOM 元素中，您都可以使用簡單的 JavaScript 代碼來插入新的文本和元素，以實現自定義的交互和功能。