【问题标题】：Move selection after a DOM element在 DOM 元素之后移动选择
【发布时间】：2013-10-18 12:25:51
【问题描述】：

我目前正在为 Web 构建 Markdown 编辑器。通过Range 接口附加它们的 HTML 等价物，可以实时预览 Markdown 标签。使用以下代码，根据 MDN 应该可以工作：

var range = document.createRange()
var selection = window.getSelection()

range.setStart(textNode, start)
range.setEnd(textNode, end + 2)

surroundingElement = document.createElement('strong')
range.surroundContents(surroundingElement)

var cursorRange = document.createRange()
cursorRange.setStartAfter(surroundingElement)

selection.removeAllRanges()
selection.addRange(cursorRange)

Firefox 工作：一些粗体文本

Chrome 不是：一些粗体字

有什么建议可能是错的吗？关于这个主题的信息很少。

回答

感谢@Tim Down，我使用他在答案中提到的链接之一中描述的不可见字符解决方法修复了它。这是我现在使用的代码：

var range = document.createRange()

range.setStart(textNode, start)
range.setEnd(textNode, end + 2)

surroundingElement = document.createElement('strong')
range.surroundContents(surroundingElement)

var selection = window.getSelection()
var cursorRange = document.createRange()

var emptyElement = document.createTextNode('\u200B')
element[0].appendChild(emptyElement)

cursorRange.setStartAfter(emptyElement)

selection.removeAllRanges()
selection.addRange(cursorRange)

【问题讨论】：

标签： javascript google-chrome firefox range selection

【解决方案1】：

问题在于，当您调用选择的addRange() 方法时，WebKit 对插入符号（或选择边界）可以去哪里有固定的想法，并且正在选择您的范围的修改版本。我在 Stack Overflow 上写过几次。这里有几个例子：

【讨论】：

@ream88：很遗憾没有。没有真正的解决方法，只有讨厌的解决方法。
修复它，使用不可见的字符解决方法。非常感谢，希望这些不一致的地方有一天会得到解决。