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

Question

I´m creating a application for students where user is gonna be able to highlight the text for the document and make comment, now for the highlight of the text i´m just taking the selected text and wrapping the content in a mark tag using window.selection.getRangeAt(0).surroundContents() , now what i need to do is to get the html of the selection and avoid that browser auto open or close the html tags, for example, i have this text:

Super wonder ultra mega promotion.

where the HTML of the text will this <p>Super wonder <strong>ultra mega</strong> promtion</p> , if the user select Super wonder ultra the HTML i will get back should be <p>Super wonder <strong>ultra and in the case the user select mega promotion the HTML i should get is mega </strong> promtion</p> but because the browser auto open and close tags if i select Super wonder ultra the HTML i get back is <p>Super wonder<strong>ultra</strong></p> . is there any way to avoid this behavior or to achieve this.

this the function i´m using to get the html of the selection:

  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;
  }

and here i highlight the text selected:

  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();
      }
    }

  }

thanks so much for any help or comment. if i´m not to clear please ask i little but more in the comments.

Answer 1

The only way I could do this was to manipulate the innerHTML of the commonAncestorContainer element. There are 2 cases that have to be handled differently.

1. When the selection starts and stops in the same text node.
2. When the selection starts and stops in a different text node.

I handled those cases by comparing the anchorNode and focusNode of the selection.

This code is not a complete solution

If you insert another paragraph below the first and try highlighting across the 2 paragraphs it will not work. You can not split a mark element across 2 block level elements. In order to perform that operation more logic would have to be added to the markText function to identify and properly manipulate all the block level elements involved. I did not write that code for you.

 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> 

Answer 2

Well thanks to @gforce301 i was able to find a solution for the situation, just to put some context to the problem, everything start because i was not able to wrap the text select cros-tags like @gforce301 mention on the solution he post, i was trying to get html in this way: bold text</strong> and more text</p> because my idea was check text and open and close the mark tag before of the closing of the </strong> tag and open another mark tag at the end and close it at the end of the selection, something like this <mark>bold text</mark></strong><mark>and more text</mark> but because the browser close if it find a open tag with out been closed and open tag if it find just the closed one i was getting back this HTML <p><strong>bold text</strong> and more text</p> .

after testing the solution of @gforce301 i get to this solution:

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

    if (range.startOffset !== range.endOffset) {
        const htmlSelection = this.getHtmlSelection(selection);
        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);
          marker.innerHTML = htmlSelection;
          range.deleteContents();
          range.insertNode(marker);
          this.hideBubble();
          return;
        }
        const p = document.createElement('p');
        p.style.display = 'inline';
        p.style.margin = '0';
        p.innerHTML = highlight.innerHTML;
        highlight.remove();
        range.deleteContents();
        range.insertNode(p);
        this.hideBubble();

    }

  }

basically what i´m doing is get HTML of the selection using this function,

  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;
  }

i storage the HTML on a constant, create the mark element and insert the HTML of the selection on the new mark element i create, remove the selection content and then insert the mark node in the selection. in case the user select again the text already highlighted is gonna remove the mark tag from the hold highlighted text.