从复制和粘贴图像中删除换行符

Question

I'm creating a an html/javascript application as a project where I essentially am creating a markup language and converting the text to pictures. One thing I am doing for this is making it possible to copy and paste the string of pictures into the text area and get the markup version so that I can save it in text format.

I accomplish this by setting the alt attribute of my html images to what I want to be copied. Something I'm having trouble with is that when I set it up so that it prints the images "down" instead of to the right, accomplished by creating a sequence of <div><img alt="words" src="picture"></img></div> it interprets it as having newline characters between each individual pictures alt when I copy and paste.

I've tried adding a backspace character but that obviously failed, does anybody have a solution for getting rid of these newline characters?

Here's a picture of the output and what you get when you copy and paste to help make it more clear

Answer 1

You can attach an event to your textarea that removes any whitespace (or just newlines if that's preferable) when the value changes:

 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> 

Answer 2

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;
  }
});