如何使用 Javascript 获取选定文本中的所有 HTML 选择标签？

Posted 2023-02-23

【中文标题】如何使用 Javascript 获取选定文本中的所有 HTML 选择标签？

【英文标题】：How do I get all the HTML selection tags in selected text using Javascript?

【发布时间】：2021-03-11 06:01:06

【问题描述】：

我有一个使用 javascript 和 Swift 创建的最小富文本编辑器（用于 ios），它支持简单的文本格式，如粗体、斜体和使用 execCommand 命令的下划线（粗体等格式化操作在 web 视图之外SwiftUI 视图）。如何通过执行 javascript 查询获取包含所选文本的所有标签？有什么简单的方法吗？

例如，这是松弛的，当我选择第一张图像中的文本时，它会突出显示粗体，但是当我将光标放在跳跃中的“u”上时，会突出显示粗体和斜体。

【问题讨论】：

也许这有帮助？ zellwk.com/blog/css-values-in-js

【参考方案1】：

查看此解决方案，基于Selection API

（按下面的运行代码片段查看其工作原理）

const text = document.querySelector('#text');
const textElements = document.querySelectorAll('#text *');

document.addEventListener('selectionchange', (e) => 
  const selection = window.getSelection();
  
  if (selection && selection.anchorNode && selection.focusNode) 
    const selectionStartsAtElement = selection.anchorNode.parentNode;
    const selectionEndsAtElement = selection.focusNode.parentNode;
  
    if (selectionStartsAtElement === text && selectionEndsAtElement === text) 
      console.log('no markup elements have been selected');
      return;
    
  
    const areElementsSelectedInsideText = text.contains(selectionStartsAtElement) && text.contains(selectionEndsAtElement);
    
    if (areElementsSelectedInsideText) 
      console.log('markup elements have been selected');
      
      let parentElementsForSelectionEnd;
      let parentElementsForSelectionStart;
      
      // get selection end elements
      if (selectionEndsAtElement !== text) 
        parentElementsForSelectionEnd = [selectionEndsAtElement];
        
        let nextParentAtSelectionEnd = selectionEndsAtElement.parentNode;

        while (nextParentAtSelectionEnd !== text) 
          parentElementsForSelectionEnd.push(nextParentAtSelectionEnd);
          nextParentAtSelectionEnd = nextParentAtSelectionEnd.parentNode;
        
      
      
      // get selection start elements
      if (selectionStartsAtElement !== text) 
        parentElementsForSelectionStart = [selectionStartsAtElement];
        
        let nextParentAtSelectionStart = selectionStartsAtElement.parentNode;

        while (nextParentAtSelectionStart !== text) 
          parentElementsForSelectionStart.push(nextParentAtSelectionStart);
          nextParentAtSelectionStart = nextParentAtSelectionStart.parentNode;
        
      

      // do what ever you need here 
      // (as I understood - you should highlight buttons somewhere)
      console.log(parentElementsForSelectionStart);
      console.log(parentElementsForSelectionEnd);
    
  
);

<div id='text'>Test with <i>tags <b>and formatting</b></i></div>

注意！此代码不是最终的，还没有准备好生产。

我确信它有很多边缘情况和额外的要求 + 它应该被重构（我创建了这样一个例子只是为了说明清楚）