jQuery在div中選擇和替換文本

Question

因此，即時通訊編寫了一個非常基礎的文本編輯器，該編輯器將允許用戶執行某些操作，例如更改文本的顏色，使其變為粗體或應用標題樣式。

我遇到的第一個問題是，當我執行替換操作時，在文本中選擇一個單詞並對其應用粗體將使其應用於字符串中該單詞的第一個實例，我需要能夠替換所選的實際項目，按索引而不是直接替換。

其次，我是否可以在div中設置標記以供用戶鍵入（單擊“ BOLD”按鈕，用戶將鍵入並且其設置太粗等，標准的所見即所得行為？）

我的小提琴在這里： http : //jsfiddle.net/d7uvvywu/12/

抱歉，我是jQuery的初學者。

我的文本替換方法。

var span = '<'+htmlCon+'>' + highlight + '<'+htmlCon+'>';
var text = $('#textRegions_1__Text1').html();
$('#textRegions_1__Text1').html(text.replace(highlight, span));

Answer 1

您需要完成的不是獲得選定的文本，而是獲得選定的索引起點和選定的索引終點。

從文本框（文本區域） 獲取選擇內容已在此處進行了很好的討論： 如何使用javascript從文本框控件中獲取所選文本

Answer 2

因此，由於這是一個可編輯的div，因此該線程中的其他答案對我不起作用，我最終以這種方式獲取所選文本的索引：

  var textComponent = document.getElementById('editer1');
  var selectedText;
  var range = window.getSelection().getRangeAt(0);
  var beforeSelectedRange = range.cloneRange();
  beforeSelectedRange.selectNodeContents(textComponent);
  beforeSelectedRange.setEnd(range.startContainer,range.startOffset);
  var startIndex = range.startContainer;
  var start = beforeSelectedRange.toString().length;
  var end = start + range.toString().length;