javascript - 当我尝试获取所选文本的 html 时，如何避免浏览器自动打开或关闭标签

Question

我正在为学生创建一个应用程序，用户将能够突出显示文档的文本并发表评论，现在为了突出显示文本，我只需选取所选文本并将内容包装在 mark 中使用 window.selection.getRangeAt(0).surroundContents() 标记，现在我需要做的是获取所选内容的 html 并避免浏览器自动打开或关闭 html 标记，例如，我有以下文本:

super 奇迹超大型促销。

文本的HTML将是<p>Super wonder <strong>ultra mega</strong> promtion</p>，如果用户选择Super wonder ultra，我将返回的HTML应该是<p>Super wonder <strong>ultra，如果用户选择mega promotion，我应该得到的HTML是mega </strong> promtion</p>，但因为浏览器自动打开和关闭如果我选择 Super wonder ultra 标签，我返回的 HTML 是 <p>Super wonder<strong>ultra</strong></p> 。有什么方法可以避免这种行为或实现这一目标。

这是我用来获取所选内容的 html 的函数:

  public getHtmlSelection(selection: any): string {
    let html: string;
    const container = document.createElement('div');
    for (let i = 0, len = selection.rangeCount; i < len; ++i) {
      container.appendChild(selection.getRangeAt(i).cloneContents());
    }
    html = container.innerHTML;
    return html;
  }

这里我突出显示所选的文本:

  public markContent(): void {
    const selection: any = window.getSelection();
    const range: any = selection.getRangeAt(0);

    if (range.startOffset !== range.endOffset) {
      if (this.markerEvent === 'p' || this.markerEvent === 'mark' || this.markerEvent === 'strong') {

        const textSeleted: string = selection.toString();
        const highlight: any = range.commonAncestorContainer;
        if (this.markerEvent !== 'mark') {
          const marker: any = document.createElement('mark');
          marker.setAttribute('class', this.colorMarker);
          range.surroundContents(marker);
          this.hideBubble();
          return;
        }

        const mark: any = range.commonAncestorContainer;

        mark.remove();
        range.deleteContents();
        range.insertNode(document.createTextNode(highlight.textContent));
        this.hideBubble();
      }
    }

  }

非常感谢您的帮助或评论。如果我不清楚，请在评论中询问我更多信息。

Answer 1

我能做到这一点的唯一方法是操作 commonAncestorContainer 元素的 innerHTML。有两种情况必须以不同的方式处理。

1. 当选择在同一文本节点中开始和停止时。
2. 当选择在不同的文本节点中开始和停止时。

我通过比较选择的 anchorNode 和 focusNode 来处理这些情况。

此代码不是完整的解决方案

如果您在第一个段落下方插入另一个段落并尝试在这两个段落中突出显示，它将不起作用。您不能将 mark 元素拆分为 2 个 block 级元素。为了执行该操作，必须向 markText 函数添加更多逻辑，以识别并正确操作涉及的所有 block 级元素。我没有为你编写该代码。

document.getElementById('mark').addEventListener('click', markText);

    function markText() {
        var selection = window.getSelection();
        
        if(selection.isCollapsed) return;
        
        var range = selection.getRangeAt(0),
            sameNode = selection.anchorNode === selection.focusNode,
            startText = '',
            endText = '',
            parentHtml = '';

        if(sameNode) {
            parentHtml = range.commonAncestorContainer.parentNode.innerHTML;
            startText = range.commonAncestorContainer.textContent.substring(range.startOffset, range.endOffset);
            parentHtml = parentHtml.replace(startText, '<mark>' + startText + '</mark>');
            range.commonAncestorContainer.parentNode.innerHTML = parentHtml;
        }
        else {
            parentHtml = range.commonAncestorContainer.innerHTML;
            startText = range.startContainer.textContent.substring(range.startOffset);
            endText = range.endContainer.textContent.substring(0, range.endOffset);
            parentHtml = parentHtml.replace(startText, '<mark>' + startText);
            parentHtml = parentHtml.replace(endText, endText + '</mark>');
            range.commonAncestorContainer.innerHTML = parentHtml;
        }
    }

<p>Super wonder <strong>ultra mega</strong> promotion</p>
<button id="mark">Mark Text</button>