如何在此弹出框中获取 HTML 格式化文本，如：<li> _ _ _ _</li><br><h1> _ _ _ _</h1> ETC

Question

此时当文本 select 时，弹出窗口以简单格式显示所有选定的文本，如一段。 但我希望，弹出窗口在显示选定文本时应使用完整的 html 标记。 喜欢

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

看我的代码：

 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>

我怎样才能得到这个请帮助我。 我此时的主要目的是当文本 select 时，弹出窗口以简单格式显示所有选定的文本，如一段。 但我希望，弹出窗口在显示选定文本时应使用完整的 html 标记。 喜欢

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

提前致谢。

Answer 1

嗯，不是你想要的，但更接近你的要求。 它是这样的：

将您的脚本更新为如下：

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

我添加了一个 function，它为您提供了所选文本的 HTML。 这就是您向用户展示 HTML 所能做的所有事情。 希望能帮助到你。

如果它对您不起作用，请告诉我:) 很乐意为您提供帮助