在editMode中对用户选择的文本进行操作

Question

我有这个 HTML 代码（它位于contenteditable="true" 块中）：

<ol>
    <li>Mozilla Firefox 1.5+</li>
    <li>Internet <span>Explorer</span> 6+</li>
    <li>Opera 9.6+</li>
    <li>Google Chrome 2+</li>
    <li>Apple Safari 3+</li>
</ol>

用户在此列表中选择了一些文本：

• 正是“Chrome”这个词，
• 或者确切地说是«Explorer»（它被span标签包裹）。

单词«Chrome»和«Explorer»之间的主要区别在于单词«Explorer»用span标签包裹，但«Chrome»不是。

那么，我如何知道选定的文本是否包含一些 HTML 标签？

1. 使用一些正则表达式？ — 我不知道如何使用 HTML 标签获取选定文本（我只知道如何从选择中获取纯文本）。
2. 检测范围为commonAncestorContainer.parentNode？ — 如果我选择了单词«Chrome»，我的parentNode 将是li 标签（但li 标签不会直接包装我选择的单词，我不想为li 标签设置样式）。所以，我不能使用commonAncestorContainer.parentNode，因为它对我没用。

其实我只是想为选中的文字设置一些CSS样式：

1. 如果用户选择的文本已经直接用一些 HTML 标签包裹，我想为这个标签添加 CSS 规则（例如，如果用户选择了单词 «Explorer» 我想为 span 标签添加 style="font-weight:bold;"；如果用户选择了Apple Safari 3+我想为li标签添加CSS规则）
2. 如果用户选择的文本只是纯文本（不直接用一些标签包裹，比如单词«Chrome»），我想用一些标签包裹这个文本并添加一些CSS规则。 （有了这个项目我没有问题，我知道怎么做。）

更新： 看，当我选择一些文本然后运行document.execCommand('Bold', false, null) 时，浏览器会用b 标签包装我的选择。当我再次选择完全相同的文本并运行相同的document.execCommand('Bold', false, null) 命令时，粗体消失了。因此，浏览器以某种方式知道我的选择被b 标签包裹并删除它们（解包）。那么，浏览器如何知道选择是否用标签包裹？如果浏览器知道，为什么用JS做起来这么难？

Answer 1

这是一个稍微复杂的领域：

• IE
• 获取所选内容并对其进行样式设置需要一些小心的 DOM 操作

这里有两个建议：

• 如果你只想切换选择的粗体，你可以使用document.execCommand("bold", false, null)
• 如果使用 CSS 类而不是元素 style 属性/属性，您可以使用我的 Rangy 库中的 CSS class applier module。