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

Question

此时当文本选择时，弹出窗口以简单格式显示所有选定的文本，如一个段落。但我想要的是，弹出窗口在显示选定文本时应该使用完整的 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>

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

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

提前致谢。

Answer 1

嗯，不是你想要的，但更接近你的要求。它是这样的：将您的脚本更新为如下：&nbsp; <script>&nbsp; const container = document.querySelector('.storypara');&nbsp; const popupContainer = document.querySelector('.popupContainer');&nbsp; // this method is added&nbsp; // It gives the text of HTML of selected text :)&nbsp; function getHTMLOfSelection () {&nbsp; &nbsp; &nbsp; var range;&nbsp; &nbsp; &nbsp; if (document.selection && document.selection.createRange) {&nbsp; &nbsp; &nbsp; &nbsp; range = document.selection.createRange();&nbsp; &nbsp; &nbsp; &nbsp; return range.htmlText;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else if (window.getSelection) {&nbsp; &nbsp; &nbsp; &nbsp; var selection = window.getSelection();&nbsp; &nbsp; &nbsp; &nbsp; if (selection.rangeCount > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; range = selection.getRangeAt(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var clonedSelection = range.cloneContents();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var div = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.appendChild(clonedSelection);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return div.innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; return '';&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; container.addEventListener('mouseup', (e) => {&nbsp; &nbsp; const selectedText = getHTMLOfSelection(); // First get the raw HTML text&nbsp; &nbsp; if (selectedText) {&nbsp; &nbsp; &nbsp; //selectedText.split("<").join("&lt");&nbsp; &nbsp; // Now replacing the < so that browser don't render it&nbsp; &nbsp; &nbsp; //selectedText.split(">").join("&gt");&nbsp; &nbsp;// Also replacing the > so that browser don't render it&nbsp; &nbsp; &nbsp; //console.log(selectedText);&nbsp; &nbsp; &nbsp; showPopup(selectedText); // using the 'xmp' tags around the text, to show the html as it is&nbsp;&nbsp; &nbsp; }&nbsp; });&nbsp; popupContainer.addEventListener('click', (event) => {&nbsp; &nbsp; if (event.target.matches('.popupContainer')) {&nbsp; &nbsp; &nbsp; popupContainer.classList.remove('show');&nbsp; &nbsp; }&nbsp; });&nbsp; function showPopup(selectedText) {&nbsp; &nbsp; // set the selected text as html inside popup element&nbsp; &nbsp; document.querySelector('.popup').innerHTML = selectedText;&nbsp; &nbsp; popupContainer.classList.add('show');&nbsp; }</script>我添加了一个函数，它为您提供所选文本的 HTML。这就是向用户显示 HTML 所能做的所有事情。希望能帮助到你。如果它对您不起作用，请告诉我:) 很乐意为您提供帮助