0

HTML code copied from MS Word into any web browser (except IE) comes with some conditional comments that contains important data for me. Like the following snippet:

<p class="MsoToc1">
<!--[if supportFields]>
    ...
<![endif]-->A Section of my Document&nbsp;...&nbsp;
<!--[if supportFields]>
    ... PAGEREF _Toc360610812 ...
<![endif]-->3<!--[if gte mso 9]>
    ...
<![endif]-->
</p>

I can read and parse the content of the comments on Firefox and Chrome using JavaScript, but IE "removes" the conditional comments before I can actually parse them. Their documentation states that everything inside conditional comments is ignored "at the parsing level".

The current technique I'm using to capture the pasted HTML is widely used by WYSIWYG editors, and is well described in this answer. Basically I create a "contenteditable" element on my document and instruct the user to paste inside that element. The browser then inserts the pasted code into the document. Then I use some JavaScript to extract the inserted code and modify it.

But that is probably the main cause of the comment-stripping problem. Right after the paste event, the pasted code is inserted into the document. And at that point, IE simply strips out the content of conditional comments.

So, are there alternative ways to capture the clipboard content that would allow me to get the data with the comments preserved?

Community
  • 1
  • 1
dirleyrls
  • 1,717
  • 1
  • 12
  • 13
  • Note that IE10 and up no longer (finally! hurray!) honour conditional comments. We use feature detection these days. – Mike 'Pomax' Kamermans Sep 13 '13 at 14:50
  • Yeah, I'm aware of that. But my target is IE 9, unfortunately. – dirleyrls Sep 13 '13 at 14:54
  • *"copied into any web browser"*... I assume you mean that you're pasting it into some kind of WYSIWYG editor control in the browser? Which control are you using? Could it be a problem with that control? Have you tried any others? – Spudley Sep 13 '13 at 14:54
  • I'm using TinyMCE 3. But from what I understand about this, all the WYSIWYG controls use the same technique to capture pasted HTML. They create a *"contenteditable element"* where the user pastes the content. And that element will always have these limitations under IE. – dirleyrls Sep 13 '13 at 14:58
  • They are named _comments_ for a reason … because they are _not_ meant to store essential data. – CBroe Sep 13 '13 at 15:18
  • Yeah, you tell that to Microsoft. – dirleyrls Sep 13 '13 at 15:26

1 Answers1

0

If you want to copy comments, you need to copy content from .childNodes rather than looking at the .innerHTML property or the .children list. The .childNodes list contains all DOM nodes including text and comments nodes, so you could do something like:

var div = createElementFrom(codeThatGetsPasted);
var target = document.querySelector(selectorForOnPageElement);
var childarray = Array.prototype.slice.call(div.childNodes);
childarray.forEach(function(child) {
 target.appendChild(child);
});

That should put the conditional comments into the target element. That said, I don't know if IE parses them after DOMContentLoaded has occurred.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • 1
    I already do that, and it does not work in IE. The comments are stripped right when they are pasted. It's like they never existed. – dirleyrls Sep 13 '13 at 18:10
  • sounds like you're tapping into the pasted code too late, then. Don't have them paste it into a contenteditable, that gets prefiltered. Make it a textarea. – Mike 'Pomax' Kamermans Sep 13 '13 at 20:53