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;