Media WYSIWYG Broken REGEX Replaces Content Erroneously

Example Fiddle

A quick demonstration of the problem and suggested fix are in the jsFiddle https://jsfiddle.net/jaydansand/suhqkhfo/.

Problem Description

Commit 6785848835db391ab7ffff2b7145e8d845815217 (from #2631934: Images or spans with class media-element are converted to "false" in WYSIWYG) breaks content that intermingles non-Media <IMG> embeds with Media embeds.

The error arises from an attempt at a backreference in a character class. As Regular-Expressions.info puts it:

Backreferences cannot be used inside character classes (ed: as the new REGEX attempts to do). The \1 in a regex like (a)[\1b] is either an error or a needlessly escaped literal 1. In JavaScript it's an octal escape.

Because [^\1]*? becomes "anything not matching character 0x01", it matches all of the content from the first <IMG> with a class attribute, all the way to the first match of the text "media-element".

After updating Media recently, we noticed some nodes losing some or all of their images (replaced by empty Media tokens), and random content, whenever the nodes were saved. We could see broken tokens being inserted when switching from WYSIWYG to source view. We isolated and tested the REGEX to confirm the issue on Regex101.com in both Firefox 49 and Chrome 54.

Suggested Fix

Since ' and " characters are invalid in class names, we don't need to check that the ending quote character matches the starting quote character: no other quote character is valid in the class name context.

So, let's replace the broken backreference with a simple character class: [^'"]. Attached is a patch that accomplishes that.