jQuery选择和替换div中的文本答案

【问题标题】：jQuery selecting and replacing text in a divjQuery选择和替换div中的文本
【发布时间】：2014-08-12 10:24:59
【问题描述】：

所以，我正在编写一个非常非常基本的文本编辑器，它将允许用户执行某些操作，例如更改文本的颜色、使其加粗或应用标题样式。

我遇到的第一个问题是在文本中选择一个单词并对其应用粗体会使它在我进行替换时应用于字符串中该单词的第一个实例，我需要能够替换按索引选择的实际项目，而不是直接替换。

其次，我是否可以在 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));

【问题讨论】：

如果你已经在使用 jQuery，看看github.com/timdown/rangy/wiki/Class-Applier-Module
stackoverflow.com/questions/3964710/…的可能重复
Rangy 插件并没有解决我的问题的第二部分，基本上我只是想知道它是否可能。

标签： javascript jquery html css

【解决方案1】：

您需要完成的不是获取选定的文本，而是获取选定的索引开始和选定的索引结束。

从文本框（文本区域）中获取选择已经在这里进行了很好的讨论：How to get selected text from textbox control with javascript

【讨论】：

这个例子展示了mozilla版本使用getting start和end index，在IE中也可以吗？ javascript替换函数是否也有使用索引位置的重载？
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
@AlexAtNet 该链接指的是有效的 SO（同一站点）帖子。所以没关系。因为以后如果作者编辑了帖子，这里的帖子就会失效。所以，只有一个链接就可以了。

【解决方案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;

【讨论】：