javascript - 标签被插入而不是 '\r\n'

Question

我正在制作一个带有麦克风和打字支持的文本编辑器。我已经将 jQuery 与它一起使用(虽然没有完全学习它)但似乎有一个错误。我已经设置了一个事件监听器，它将监听回车键并添加 '\r\n' 但它会得到 <br>添加在 <p>标签。当我输入时，<br>消失了，输入的文本被填满。请尝试理解，尽管我还是 15 岁，但不要称我为菜鸟。

我还设置了一个保存选项，为此我为新行苦苦挣扎，但它没有出现。

JQuery

$(document).ready(function() {
  $('#download').click(function() {
    $('p').find('br').before(document.createTextNode('\n')).remove();
    $('p').contents().unwrap().wrapAll('<p>');
    $('p').attr("id", "p");
    downloadInnerHtml('notes.txt', 'p', 'txt');
  });
});

JS

let p = document.createElement('p');
const notes = document.querySelector('#notes');
p.setAttribute('id', 'p');
notes.appendChild(p);
document.execCommand('defaultParagraphSeparator', false, 'p');
recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('')

  p.textContent = transcript;
  if (e.results[0].isFinal) {
    p = document.createElement('p');
    p.setAttribute('id', 'p');
    notes.appendChild(p);
  }
  console.log(transcript);
});
notes.addEventListener('beforeinput', function() {
  document.execCommand('defaultParagraphSeparator', false, 'p');
});
notes.addEventListener('keydown', function(event) {
  if (event.key === "Enter") {
    document.getElementById('p').append('\n');
    document.getElementById('p').append('\n');
  }
});
recognition.addEventListener('end', recognition.start);
recognition.start();

function downloadInnerHtml(filename, elTag, mimeType) {
  var elHtml = document.getElementById(elTag).innerHTML;
  var link = document.createElement('a');
  mimeType = mimeType || 'text/plain';
  link.setAttribute('download', filename);
  link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
  link.click();
}

我期待一个换行符，但在保存按钮上，该功能还应该包含换行符，但它本身并没有发生。喜欢，

预期输出:-

I am someone.

Foo bar.

实际输出:-

I am someone.Foo bar.

Answer 1

在 HTML 中，任何和所有(除了不间断的)空格都被折叠成一个空格。例如:

<span>Hello<span>\n
<span>World<span>

我已经包括了\n突出显式换行符。但是，上面的内容将呈现为:

Hello World

这是预期的 HTML 行为，因此您会发现其他编辑器所做的是透明地在换行符和 <br> 之间进行转换。对于存储和显示，您需要做同样的事情。

---

编辑:

您正在使用 <div>作为编辑器的基础。也许你应该使用 <textarea>相反，这更多是为了成为一名编辑的既定目标。另外，试试 this W3Schools example清楚地看到当逐字放置在 HTML 中时，您生成的文本将如何显示(单击“尝试”，然后在某处添加 <br/>，然后再次单击“尝试”)。