页面实现选择内容添加下划线功能遇到的问题

Question

功能大致实现思路时给选中的内容增加一个span标签，通过这个span标签控制样式和实现后续功能，当选中的内容属于同一个p标签时正常，
如果选择多个p标签的内容时就会结构破坏，不在原来的行中。
比如当页面有如下内容时：

第一行内容啊

第二行内容啊

第三行内容啊

如果选中第一个p标签中的“内容啊”和第二个p标签中的“第二行”时，给他们添加span标签会破环原来的元素结构，变成如下这样：

第一行

内容啊第二行

内容啊

第三行内容啊

想实现的效果是如下这样：

第一行内容啊

第二行内容啊

第三行内容啊

该如何实现

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你遇到的问题是在使用JavaScript和HTML来实现选择内容添加下划线功能时，当选中多个段落（<p>标签）的内容时，会出现结构错乱的问题。这种情况可能是因为你在添加<span>标签时没有考虑到原有的文本结构和样式。要实现这个功能并且保持良好的结构，你可以尝试以下方法：

解决方案步骤：

1. 识别选中的文本范围：首先，你需要使用JavaScript来识别用户选中的文本范围，这可以通过window.getSelection()方法实现。这个方法返回一个Selection对象，包含了关于用户选中文本的信息。
2. 包裹选中的文本：在用户选中的文本周围添加<span>标签或其他适当的HTML元素。你可以使用Range对象来实现这一点，它可以通过Selection对象的getRangeAt()方法获得。你可以通过执行一系列操作（如insertNode）来在选定的文本周围插入<span>标签。
3. 维护文本结构：在添加<span>标签时，需要考虑到原有文本的HTML结构。特别是当你跨越多个段落或其他块级元素时，要确保添加的标签不会破坏原有的布局和样式。你可以尝试只在当前段落内部添加标签，而不是跨段落添加。
4. 应用样式：在<span>标签上应用样式以实现下划线效果。可以使用内联样式或通过CSS类来定义样式。确保样式适用于不同的情况和场景。
5. 处理跨段落选择：如果用户选中的文本跨越多个段落，你可能需要更复杂的逻辑来处理这种情况。你可以考虑创建一个包裹整个选定区域的单一<span>标签，或者在每个段落内部分别添加标签。这需要仔细考虑用户体验和页面布局。

示例代码（简化版）：

window.addEventListener('select', function(event) {
  var selection = window.getSelection();
  if (selection.rangeCount && selection.getRangeAt) {
    var range = selection.getRangeAt(0); // 获取选中的范围
    var spanElement = document.createElement('span'); // 创建新的span元素
    spanElement.style.textDecoration = 'underline'; // 设置下划线样式
    // 这里可以添加更复杂的逻辑来处理跨段落的选中情况
    range.surroundContents(spanElement); // 在选中的文本周围插入span元素
  }
});

请注意，这只是一个简化的示例，实际应用中可能需要更复杂的逻辑来处理各种情况和优化用户体验。特别是处理跨段落的选中情况可能需要进一步研究和测试。