Удаление символов новой строки из копирования и вставки изображений

#javascript #html

#javascript #HTML

Вопрос:

Я создаю приложение html / javascript как проект, в котором я по сути создаю язык разметки и преобразую текст в изображения. Одна вещь, которую я делаю для этого, позволяет копировать и вставлять строку изображений в текстовую область и получать версию разметки, чтобы я мог сохранить ее в текстовом формате. формат.

Я добиваюсь этого, устанавливая alt атрибут моих HTML-изображений на то, что я хочу скопировать. У меня возникли проблемы с тем, что, когда я настраиваю его так, чтобы он печатал изображения «вниз», а не вправо, что достигается путем создания последовательности <div><img alt="words" src="picture"></img></div> , он интерпретирует ее как наличие символов новой строки между каждым отдельным изображением alt при копировании и вставке.

Я пытался добавить символ обратного пробела, но это, очевидно, не удалось, у кого-нибудь есть решение для избавления от этих символов новой строки?

Вот изображение выходных данных и то, что вы получаете при копировании и вставке, чтобы сделать его более понятным

1. Попробуйте установить img значение display: block

2. Как насчет добавления стиля display: inline-block к div тегам? для получения дополнительной информации см. Простой способ на этой странице

3. Я хочу, чтобы в тексте не было символов новой строки, чтобы изображения не находились в одной строке. display: inline-block помещает изображения в одну строку. display: block для меня не избавляется от символа новой строки

Ответ №1:

 var pasteArea = document.getElementById('pasteArea');

pasteArea.addEventListener('input', function () {
  var value = pasteArea.value;
  var spaceRemoved = value.replace(/n/g, '');

  if (value !== spaceRemoved) {
    pasteArea.value = spaceRemoved;
  }
});

Ответ №2:

Вы можете прикрепить событие к вашей текстовой области, которое удаляет любые пробелы (или просто новые строки, если это предпочтительнее) при изменении значения:

 var pasteArea = document.getElementById('pasteArea');

pasteArea.addEventListener('input', function () {
  var value = pasteArea.value;
  var spaceRemoved = value.replace(/s/g, '');

  if (value !== spaceRemoved) {
    pasteArea.value = spaceRemoved;
  }
});

 textarea {
  height: 10em;
  width: 300px;
}

 <textarea id="pasteArea"></textarea>