亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在此彈出框中獲取 HTML 格式的文本,例如:<li> _ _ _ _</li> <br>

如何在此彈出框中獲取 HTML 格式的文本,例如:<li> _ _ _ _</li> <br>

叮當貓咪 2022-10-27 15:13:40
此時當文本選擇時,彈出窗口以簡單格式顯示所有選定的文本,如一個段落。但我想要的是,彈出窗口在顯示選定文本時應該使用完整的 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...提前致謝。
查看完整描述

1 回答

?
弒天下

TA貢獻1818條經驗 獲得超8個贊

嗯,不是你想要的,但更接近你的要求。它是這樣的:


將您的腳本更新為如下:


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

我添加了一個函數,它為您提供所選文本的 HTML。這就是向用戶顯示 HTML 所能做的所有事情。希望能幫助到你。


如果它對您不起作用,請告訴我:) 很樂意為您提供幫助


查看完整回答
反對 回復 2022-10-27
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號