Удалить первую строку из Textarea

Question

У меня есть инструмент, который удаляет пустые строки из подтверждения (текст), но по какой-то причине есть верхняя строка, которая не читается как пустая строка и не удаляется.

В настоящее время мой инструмент позволяет человеку вставлять текст в текстовую область, а затем при нажатии кнопки "удалить пробелы и копировать" удаляются пустые строки и текст копируется в буфер обмена.

Я хочу сохранить ту же функцию, но каким-то образом удалить первую строку, когда текст вводится в текстовую область или когда нажата кнопка "удалить пробелы и копировать".

 <script>
 function copyToClipboard(element) {
  var text = $(element).clone().find('br').prepend('\r\n').end().text()
  element = $('<textarea>').appendTo('body').val(text).select()
  document.execCommand('copy')
  element.remove()
  }
  </script>

<textarea name="mas" rows="100" rows="50" contenteditable="true" id="p20" class="content" onchange="this.value=this.value.replace(/[\n\r](?!\w)/gi,'');" style="height: 500px; width:800px;" type="text" data-bind="value: myValue, hasFocus: cleared"></textarea>

<!----------- BUTTONS ------------>
<div class="fixed">
<button onclick="copyToClipboard('#p20')" class="templateBtn">Remove Spaces & Copy</button>
<input type="button" data-bind="click: clearValue" value="clear" class="templateBtn" />
<script type="text/javascript">
    var viewModel = {
   myValue: ko.observable(''),
   cleared: ko.observable(false),
   clearValue: function() {       
   this.myValue('');   
   this.cleared(true);
    }
  };

  ko.applyBindings(viewModel);
   </script>

  <!----------- END.BUTTONS ------------>

 <div class="mas" id="hide" ></div>

 <pre contenteditable="true" id="p20" class="templateText">

 </div></div>

Answer 1

Вот быстрое решение, которое вы могли бы использовать, выполнить trim() на замененном тексте:

<textarea name="mas" rows="100" rows="50" contenteditable="true"
id="p20" class="content"
onchange="this.value=(this.value.replace(/[\n\r](?!\w)/gi,'')).trim();"
style="height: 500px; width:800px;" type="text"
data-bind="value: myValue, hasFocus: cleared"></textarea>

Answer 2

Регулярное выражение [\n\r](?!\w) соответствует любому символу CR или LF, за которым не следует буквенно-цифровой или символ подчеркивания. Таким образом, он может соответствовать первому из двух ограничителей строки подряд при замене пустых строк пустой строкой. '' Он не соответствует разделителю строки, за которым следует буква. Следовательно, терминатор строки в начале текста, за которым следует символ слова, остается на месте.

Пустые строки, определенные как "Начало строки, за которыми следуют ноль или более пробельных символов, не включая символы конца строки, за которым следует конец строки, за которым следуют ноль или более символов конца строки", может сопоставляться многострочное регулярное выражение, например:

/^[ \f\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]*$[\n\r]*/gm;

где первый набор символов используется для сопоставления пробелов (\s) после удаления символов перевода строки и возврата каретки, а также $[\n\r]* Компонент совпадает как с ограничителями строки, так и с концом ввода. (Отредактировано: конечная пустая строка без конца строки соответствует концу)

Попробуйте это ниже, введя строки и щелкнув за пределами элемента textarea, чтобы вызвать событие изменения:

function removeBlankLines( textArea) {
   var blankLine = /^[ \f\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]*$[\n\r]*/gm;
   textArea.value=textArea.value.replace(blankLine,'');
}

<textarea onchange="removeBlankLines( this)" cols="20" rows="8"></textarea>

Это не обрезает и не удаляет пробелы в непустых строках. Если вам все еще не удается выполнить то, что вы хотите сделать, обновите вопрос, используя текстовые данные, использованные для создания проблемы, и подробное описание того, что вы ожидали и что вы получили. Пожалуйста, удалите нокаут-код, если он не связан с вопросом (кажется, что нет).