jQuery пытается добавить тег br для каждого диапазона, который ""

Question

Я разрабатываю и печатаю тестовую игру, используя jQuery и Laravel.Тест хранится в Laravel и отображается на другой странице.

Теперь, когда я сохраняю enter в дБ, он сохраняет его, и когда я отображаю его на странице, мне как-то удалось прочитать его как enter

Проблема : когда документ готов, я делю каждый тестовый символ на span для дополнительной работы.И это не читает разрыв строки.Что я могу сделать, чтобы получить те пустые промежутки?

Я ловил эти промежутки, как этот $(span[counter]).text() == "\n", а затем я добавляю тег br, когда пользователь печатает, но я хочу, чтобыстраница загружается, она должна иметь тег br после этого span, что означает "\ n".Пожалуйста, направьте меня сюда

Мой код:

var inputString = "";
var inputStringEnter = "";
var testString = $('.val').text();

var pass = "<span>" + $('.val').text().split("").join("</span><span style='white-space: pre' class='empty'>") + "</span>";
$('.val').html(pass);
var testSpans = document.querySelectorAll(".val span");

function matchLetter(e) {
  if (continueTyping == true) {
    $('.hidden-input').focus();
    isIgnored = false;
    if (e.keyCode == 8) {
      if (counter > 0) {
        inputString = inputString.substr(0, inputString.length - 1);
        $(testSpans[counter - 1]).removeClass("spanClass redClass");
        $(testSpans[counter - 1]).addClass("highlight-class");
        $(testSpans[counter]).removeClass("highlight-class");
        $("g[data-key='13']").removeClass("is-active");
        $("div[data-key='13']").removeClass("highlight-class");
        $("div[data-key=" + testString[counter].toUpperCase().charCodeAt(0) + "]").removeClass("highlight-class");
        if ($(testSpans[counter - 1]).text() != "\n") {
          $("div[data-key=" + testString[counter - 1].toUpperCase().charCodeAt(0) + "]").addClass("highlight-class");
        } else {
          $("div[data-key='13']").addClass("highlight-class");
        }
        $("g[data-key=" + testString[counter].toUpperCase().charCodeAt(0) + "]").removeClass("is-active");
        if ($(testSpans[counter - 1]).text() != "\n") {
          $("g[data-key=" + testString[counter - 1].toUpperCase().charCodeAt(0) + "]").addClass("is-active");
        } else {
          $("g[data-key='13']").addClass("is-active");
        }
        counter--;
      }
    } else {
      if (e.key.length == 1 || e.key == 'Enter') {
        inputString += e.key.substr(0, 1);
        if ($(testSpans[counter]).text() != "\n") {
          if (testString[counter] == inputString[counter]) {
            $(testSpans[counter]).addClass("spanClass");
          } else {
            $(testSpans[counter]).addClass("redClass");
          }
        } else {
          if ($(testSpans[counter]).text() == "\n" && e.key == 'Enter') {
            // console.log('correct')
            $(testSpans[counter]).addClass("spanClass");
          } else {
            $(testSpans[counter]).addClass("redClass");
          }
        }

        $(testSpans[counter + 1]).addClass("highlight-class");
        $(testSpans[counter]).removeClass("highlight-class");

        if ($(".hidden-input").val().length != $(".val").text().length) {
          if ($(testSpans[counter]).text() != "\n") {
            $("div[data-key=" + testString[counter].toUpperCase().charCodeAt(0) + "]").removeClass("highlight-class");

          } else {
            $("div[data-key='13']").removeClass("highlight-class")
          }
          if ($(testSpans[counter + 1]).text() != "\n") {
            $("div[data-key=" + testString[counter + 1].toUpperCase().charCodeAt(0) + "]").addClass("highlight-class");
          } else {
            $("div[data-key='13']").addClass("highlight-class")
          }
          if (($(testSpans[counter]).text() != "\n")) {
            $("g[data-key=" + testString[counter].toUpperCase().charCodeAt(0) + "]").removeClass("is-active");

          } else {
            $("g[data-key='13']").removeClass("is-active");
          }
          if (($(testSpans[counter + 1]).text() != "\n")) {
            console.log('hello')
            $("g[data-key=" + testString[counter + 1].toUpperCase().charCodeAt(0) + "]").addClass("is-active");
          } else {
            $("g[data-key='13']").addClass("is-active")
          }

        }
        counter++;
      }
    }
    $(".hidden-inputs").val($(".spanClass").length)
  } else {
    $('input').focusout();
    console.log('ignored')
  }
}
});

HTML

<div class="screenBasic-word">
  <div class="letter letter--basic screenBasic val">{!! (e($test->paragraph))!!}</div>
  <input type="hidden" class="wps form-control" name="wps">
  <input type="hidden" class="id form-control" value="{{ $test->id }}" name="id">
</div>