How can i get HTML Formated text in this popup box Like: <li> _ _ _ _</li> <br> <h1> _ _ _ _</h1>etc

Question

at this time When text select, The popup show all selected text as in simple format, Like one paragraph. But i want that, the popup should use complete html tag when showing selected text. Like

<li> _ _ _ _</li> <br> <h1> _ _ _ _</h1>etc... 

see my code:

 const container = document.querySelector('.storypara'); const popupContainer = document.querySelector('.popupContainer'); container.addEventListener('mouseup', (e) => { const selectedText = window.getSelection().toString(); if (selectedText) { showPopup(selectedText); } }); popupContainer.addEventListener('click', (event) => { if (event.target.matches('.popupContainer')) { popupContainer.classList.remove('show'); } }); function showPopup(selectedText) { // set the selected text as html inside popup element document.querySelector('.popup').innerHTML = selectedText; popupContainer.classList.add('show'); }

 body { margin: 0; }.popupContainer { position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); top: 0; display: none; align-items: center; justify-content: center; color: red; }.show { display: flex; }.popup { background: #fff; padding: 10px; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); width: 80%; }

 <div class="storypara"> <p><strong>A Bold example Line</strong><br> Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. </p> <h2>An Unordered HTML List</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>An Ordered HTML List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <p>Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. Here are some examples of paragraphs. </p> </div> <div class="popupContainer"> <div class="popup"></div> </div>

How can i get this plz help me. my main purpose at this time When text select, The popup show all selected text as in simple format, Like one paragraph. But i want that, the popup should use complete html tag when showing selected text. Like

<li> _ _ _ _</li> <br> <h1> _ _ _ _</h1>etc... 

Thanks in advance.

Answer 1

Well, not quite what you want, but a lot closer to what you are asking for. Here it goes:

Update your script to be as follows:

  <script>
  const container = document.querySelector('.storypara');
  const popupContainer = document.querySelector('.popupContainer');

  // this method is added
  // It gives the text of HTML of selected text :)
  function getHTMLOfSelection () {
      var range;
      if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        return range.htmlText;
      }
      else if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
          range = selection.getRangeAt(0);
          var clonedSelection = range.cloneContents();
          var div = document.createElement('div');
          div.appendChild(clonedSelection);
          return div.innerHTML;
        }
        else {
          return '';
        }
      }
      else {
        return '';
      }
    }


  container.addEventListener('mouseup', (e) => {
    const selectedText = getHTMLOfSelection(); // First get the raw HTML text
    if (selectedText) {
      //selectedText.split("<").join("&lt");    // Now replacing the < so that browser don't render it
      //selectedText.split(">").join("&gt");   // Also replacing the > so that browser don't render it
      //console.log(selectedText);
      showPopup(selectedText); // using the 'xmp' tags around the text, to show the html as it is 
    }
  });

  popupContainer.addEventListener('click', (event) => {
    if (event.target.matches('.popupContainer')) {
      popupContainer.classList.remove('show');
    }
  });

  function showPopup(selectedText) {

    // set the selected text as html inside popup element
    document.querySelector('.popup').innerHTML = selectedText;
    popupContainer.classList.add('show');

  }
</script>

I've added a function, which gives you the HTML of the selected text. This is all you can do to show the HTML to the user. Hope it helps.

Let me know please if it don't work at your end:) Will be happy to help