[JS] 선택된 영역의 텍스트 가져오기

// TEXT로 가져오기 - wfSel.getTEXT()

// HTML 코드로 가져오기 - wfSel.getHTML()

// 특정 문자열, 태그 등을 추가하기 - wfSel.insert(before, after)

// 해당 문자열을 바꾸기 - wfSel.replace(str)

// 태그 삭제하기 - wfSel.removeTag()


const wfSel = (() => {
  let sel, range, content, node;

  return {
    setVariables: () => {
      sel = window.getSelection();
      if (!sel) return;
      // Set variables
      range = sel.getRangeAt(0);
      content = range.cloneContents();
      node = document.createElement('span');
    },
    getTEXT() {
      this.setVariables();
      return sel.toString();
    },
    getHTML() {
      this.setVariables();
      const span = document.createElement('span');
      span.appendChild(content);
      return span.innerHTML;
    },
    insert(before, after) {
      before = before || '';
      after = after || '';
      this.replace(before + wfSel.getHTML() + after);
    },
    replace(text) {
      this.setVariables();
      node.innerHTML = text;
      range.deleteContents();
      range.insertNode(node.childNodes[0]);
    },
    removeTag: function() {
      this.replace(wfSel.getTEXT());
    }
  }
})();