会，因为surroundcontents要求range起点和终点必须在同一text节点内，跨元素、跨块级容器或含html标签时均抛rangeerror；安全用法需前置校验同节点且为文本节点，否则应改用extractcontents+insertnode。
surroundContents 会报“RangeError: The boundary points of a range must be the same”吗？
会，而且这是最常见、最让人困惑的错误。根本原因不是你选得不对，而是 surroundContents 对 Range 的边界有严格限制：起点和终点必须在同一个 Text 节点内，且不能跨元素、不能跨块级容器（比如不能横跨两个 <p></p> 或一个 <span></span> 和一个 <strong></strong>）。浏览器只要发现起点和终点属于不同节点，就直接抛这个错误，不给你任何商量余地。
实操建议：
- 先用
range.startContainer === range.endContainer && range.startContainer.nodeType === Node.TEXT_NODE做前置校验，不满足就别调surroundContents - 如果用户选中了跨标签文本（比如从
<p>Hello <em>world</em>!</p>中选中 “o world”），surroundContents必然失败 —— 这时候得换思路，用extractContents+ 插入新元素 +insertNode手动拼 - 注意：即使只选中纯文本，若光标在换行符或空格前后（尤其来自
pre或white-space: pre），也可能触发边界落在不同文本节点上
怎么安全地用 surroundContents 包裹纯文本选区？
只适用于「整段连续、未被 HTML 标签打断」的文本，比如 <p>这是一段没有内联标签的普通文字</p> 中任意子串。
实操步骤：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 获取当前选区：
const selection = window.getSelection(); const range = selection.getRangeAt(0); - 确认范围合法：
if (range.startContainer.nodeType === Node.TEXT_NODE && range.startContainer === range.endContainer) - 创建包裹元素，例如：
const span = document.createElement('span'); span.className = 'highlight'; - 调用：
range.surroundContents(span);—— 此时原选中文本会变成span的子节点
注意：surroundContents 会自动把原内容移出并塞进新元素，不需要手动 deleteContents；但一旦执行，原 Range 就失效了，后续操作需重新获取选区。
为什么 surroundContents 不支持包裹已有的 inline 元素？
因为它的设计语义是「将纯字符内容整体封装」，而非「套一层 DOM 容器」。如果选区里已有 <em></em>、<strong></strong> 等，range.startContainer 和 range.endContainer 很可能分别是两个不同的 Text 节点（比如 "foo<em>bar</em>baz" 中选中 "obarba"，起点在第一个文本节点末尾，终点在第二个文本节点中间），违反同节点约束。
替代方案（更通用）：
- 用
range.extractContents()拿到文档片段（DocumentFragment） - 新建容器元素（如
span），appendChild这个片段 - 用
range.insertNode(newElement)把容器插回去 - 该方式能处理任意结构的选区，包括跨标签、含空格、带格式文本
兼容性与 DOM 状态变化要注意什么？
surroundContents 在所有现代浏览器中都可用，但行为高度依赖 DOM 结构稳定性。容易踩的坑：
- 执行前若页面正在异步渲染（如 React/Vue 更新中）、或有 MutationObserver 监听文本节点，可能导致
Range边界意外失效 - 包裹后，原
Text节点会被拆分（起点前、选中部分、起点后各成一个新文本节点），如果代码依赖旧节点引用，会出错 - 若目标元素设置了
contenteditable="false"或父级禁用了编辑，surroundContents仍会执行成功，但视觉上可能不可见（比如被 CSSuser-select: none干扰）
真实场景中，与其死磕 surroundContents 的边界条件，不如默认走 extractContents + insertNode 流程 —— 多几行代码，但稳定得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
