Как заставить метод JavaScript split() правильно разделить вставленный текст на новые строки?

#javascript #html

#javascript #HTML

Вопрос:

Кто-нибудь, пожалуйста, может помочь с этим?

У меня есть несколько удовлетворяемых элементов div. Мне нужно добавить возможность копирования / вставки в них чисел. Эти числа могут быть в столбцах и строках, как в Excel.

Вставленный текст должен быть разделен сначала на новые строки, а затем на каждую строку пробелом / табуляцией, чтобы в элемент div попадал только верхний левый номер. Затем остальные числа должны перейти в последующие элементы div, как в Excel.

 const target = document.querySelector("div#input11");

target.addEventListener('paste', (event) => {

  let paste = (event.clipboardData || window.clipboardData).getData('text/plain');
  var pasteString = paste.toString();
  result = stringOperations(pasteString);

  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(result));

  event.preventDefault();

});

function stringOperations(s) {

  var rowArray = s.split("/(nr|n|r)/gm");
  return rowArray[0];

}  
 <div id="input11" class="input-field2" contenteditable="true" onChange="checkInput(1,1)"></div>  

Проблема в том, что мое регулярное выражение, похоже, не распознает новые строки, так что вставленный им текст не разбивается на новые строки.

Когда я копирую / вставляю это в div :

 44439 515 541 928
43936 929 692 711
44464 800 710 824
41533 979 675 758
  

Я просто получаю числа в виде длинной последовательности, разделенной пробелом, а не только в первой строке.

 44439 515 541 928 43936 929 692 711 44464 800 710 824 41533 979 675 758
  

Я очень ценю любую помощь, спасибо.

Ответ №1:

В вашем регулярном выражении есть кавычки, хотя их не должно быть. Измените "/(nr|n|r)/gm" на просто /(nr|n|r)/gm , и все будет готово.

 const target = document.querySelector("div#input11");

target.addEventListener('paste', (event) => {

  let paste = (event.clipboardData || window.clipboardData).getData('text/plain');
  var pasteString = paste.toString();
  result = stringOperations(pasteString);

  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(result));

  event.preventDefault();

});

function stringOperations(s) {
  var rowArray = s.split(/(nr|n|r)/gm);
  return rowArray[0];
}  
 <div id="input11" class="input-field2" contenteditable="true" onChange="checkInput(1,1)"></div>