InnerText 不適用於 Javascript 中的深層克隆？

Question

我正在嘗試從具有 contentEditable 屬性的 div 中檢索一些文本，並且它工作得很好。

但是我注意到，深度克隆包含文本的元素會使.innerText完全無法使用，因為文本布局（例如回車或換行符）顯然已從屬性中消失。

這是一個工作示例→ https://jsfiddle.net/TomWTG/otuakz6q/8/

以下是相關代碼：

<div contenteditable="true" class="input_text">
  This is a placeholder.
  <div>
    <br />
  </div>
  <div>
    The issue I'm having is that the linebreaks and the carriage returns are
    completely gone from the deep clone's .innerText property.
  </div>
  <div>
    <br />
  </div>
  <div>Try and convert it to see the text layout removed.</div>
</div>

<button>convert</button>

const btn = document.querySelector('button')
const inputText = document.querySelector('.input_text')

btn.addEventListener('click', e => {
  const tempText = inputText.cloneNode(true)
  console.log(tempText.innerText)

  inputText.innerHTML = tempText.innerText
})

例如，假設：

    inputText.value =

    "Hello World, foo bar.

     foo bar."

來自tempText.innerText的預期 output 將是：

    "Hello World, foo bar.

     foo bar."

但結果是：

    "Hello World, foo bar.foo bar."

所以我的問題是：有沒有辦法可以克隆文本並且仍然可以同時訪問 HTML 孩子和 InnerText？

提前致謝 ！

Answer 1

正如評論中提到的基本 HTML 忽略換行符（ \n ）。

例外是<pre>標記或 CSS 屬性white-space: pre;的元素已設置。 這些標簽內的文本將顯示您的換行符。

您會在 contenteditable <div>中看到格式化文本的原因是因為它實際上會在您編輯時創建標記。 例如，按 Enter 會生成一個<br>標簽，依此類推。

而且因為innerText只給你文本而不是 HTML 你不會看到換行符。 問題不在於克隆，與未克隆版本相同：

inputText.innerHTML = inputText.innerText;

結果：

"Hello World, foo bar.foo bar."

要解決它，您可以使用關注文本格式（ <pre>或類似）的 HTML 標簽，或者您只需插入 HTML。 使用innerHTML會處理您的換行符：

const btn = document.querySelector('button')
const inputText = document.querySelector('.input_text')

  btn.addEventListener('click', (e) =>{
  const tempText = inputText.cloneNode(true)
  console.log(tempText.innerText)

  inputText.innerHTML = tempText.innerHTML
})