javascript - 如何从这两个内容相同但结构不同的 contenteditable div 中获取相同的文本？

Question

事情是这样的:

内容编辑很糟糕。 Firefox 使用类似 div1 的方式处理它，而 Chrome 则使用 div2 的方式处理它。

两者具有相同的文本内容(从用户的 Angular 来看)，但它们的结构方式不同。

当我使用 innerText 获取两个文本内容时，我会得到不同的结果，因为它们的结构方式不同。

有没有办法获取这些文本并返回相同的字符串(因为它们在屏幕上生成完全相同的文本)？

类似于:

div1 = div2 = "Line1\nLine2\n\nLine3\n\n\nLine4" (事实上，这是 div1 结果，因为它仅由文本和中断)。在本例中，div2 就是问题所在。

我需要的伪代码:

“根据屏幕上显示的内容获取这些 div 的文本内容以及中断数量。”

最终目标:

为了在两个结构中一致地粘贴新文本，我需要一种以相同方式处理它们的方法。

const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');
const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');

p1.innerText = JSON.stringify(div1.innerText);
p2.innerText = JSON.stringify(div2.innerText);

#div1 {
  border: 1px dotted blue;
}

#div2 {
  margin-top: 40px;
  border: 1px dotted red;
}

<div id="div1" contenteditable>
  Line1
  <br>
  Line2
  <br>
  <br>
  Line3
  <br>
  <br>
  <br>
  Line4
</div>

<p><b>Div1 innerText:</b></p>
<p id="p1"></p>

<div id="div2" contenteditable>
  <div>Line1</div>
  <div>Line2</div>
  <div><br></div>
  <div>Line3</div>
  <div><br></div>
  <div><br></div>
  <div>Line4</div>
</div>

<p><b>Div2 innerText:</b></p>
<p id="p2"></p>

Answer 1

我在评论中建议您改造您的 <div>的内容变成 <textarea>元素。此解决方案避免了 Firefox 和 Chrome 之间的行为差​​异。

下面是一个关于如何实现它的简单示例。我想您将能够根据您想要的内容进行调整(例如将 <p> 切换为 <div>)。

const contentEditable = document.querySelector('#content-editable'),
  htmlPreview = document.querySelector('#html-preview');

htmlPreview.innerText = contentEditable.innerHTML;

contentEditable.addEventListener('click', contentEditableHtmlToTextarea);

/**
 * Converts HTML of #content-editable into <textarea>.
 */
function contentEditableHtmlToTextarea() {
  const textarea = document.createElement('textarea'),
    height = contentEditable.offsetHeight;
  
  // Converts <p> tags to \r\n.
  textarea.value = this.innerHTML
    .replace(/^\s*/gm, '')
    .replace(/<p>(.*?)<\/p>/g, '$1\r\n')
    .trim();
    
  // Updates #content-editable HTML.
  this.innerHTML = '';
  this.appendChild(textarea);
  
  textarea.style.height = `${height}px`;
  htmlPreview.style.display = 'none';
  
  this.removeEventListener('click', contentEditableHtmlToTextarea);
  
  // A bit tricky, but without timeout, the callback is directly called.
  setTimeout(() => {
    document.addEventListener('click', contentEditableTextareaToHtml);
  }, 0);
}

/**
 * Converts <textarea>'s value into HTML for #content-editable.
 */
function contentEditableTextareaToHtml(e) {
  const textarea = contentEditable.querySelector('textarea'),
    // Converts lines into <p> tags.
    html = textarea.value.replace(/^(.+?)$/gm, '<p>$1</p>');
    
  // Checks if the mouse click is outside the <textarea>.
  if (e.target !== textarea) {
    // Updates #content-editable HTML.
    textarea.remove();
    contentEditable.innerHTML = html;
    htmlPreview.innerText = contentEditable.innerHTML;
    
    htmlPreview.style.display = 'block';
    
    document.removeEventListener('click', contentEditableTextareaToHtml);
    contentEditable.addEventListener('click', contentEditableHtmlToTextarea);
  }
}

div {
  padding: 3px;
  
  border: 1px solid #000;
}

textarea {
  margin: 0 auto;
  display: block;

  width: 98%;
}

<div id="content-editable">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
</div>

<pre id="html-preview"></pre>