1

我有这个 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»，我想style="font-weight:bold;"为span标签添加；如果用户选择了Apple Safari 3+我想添加 CSSli标签规则）
  2. 如果用户选择的文本只是纯文本（不直接用一些标签包装，比如单词«Chrome»），我想用一些标签包装这个文本并添加一些 CSS 规则。（有了这个项目我没有问题，我知道该怎么做。）

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

4

1 回答 1

2

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

  • IE < 9 具有与其他浏览器完全不同的选择和范围 API
  • 获取所选内容并为其设置样式需要一些小心的 DOM 操作

这里有两个建议：

  • 如果您只想切换选择的粗体，您可以使用document.execCommand("bold", false, null)
  • 如果使用 CSS 类而不是元素style属性/属性，您可以使用我的Rangy库的CSS 类应用程序模块。
于 2011-10-26T21:19:00.510 回答