From dc7c5bc9b443bb6285347a34ed25af684a8e6f96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?= Date: Mon, 11 May 2020 18:12:55 +0200 Subject: [PATCH 1/2] Upgrade guide: Add more details to the jQuery 3.5 upgrade guide The commit adds information about jQuery Migrate 3.3.0+ logging of non-compliant HTML input. It also explicitly states the common example of using a single auto-closing tag works even in jQuery 3.5.0+. There are also tweaks in other places. --- pages/upgrade-guide/3.5.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/pages/upgrade-guide/3.5.md b/pages/upgrade-guide/3.5.md index bff226e..120a3cd 100644 --- a/pages/upgrade-guide/3.5.md +++ b/pages/upgrade-guide/3.5.md @@ -11,6 +11,8 @@ If you want to upgrade to jQuery 3.5.0 or newer and don't have time to deal with jQuery.UNSAFE_restoreLegacyHtmlPrefilter(); ``` +jQuery Migrate 3.3.0 or newer logs warnings for all input that's affected by this change, regardless of whether the `jQuery.UNSAFE_restoreLegacyHtmlPrefilter()` method was called or not. **Note**: if you overwrite `jQuery.htmlPrefilter` manually, you'll lose those warnings! + If you don't use jQuery Migrate, don't add it just for this one workaround. Instead, you can revert to the previous behavior by redefining `jQuery.htmlPrefilter` after loading jQuery: ```js var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi; @@ -38,7 +40,7 @@ would create the following structure: ``` because `
` was replaced with `
` & `` with ``. -jQuery 3.5.0 has changed `jQuery.htmlPrefilter` to be an identity function. That means that the above `jQuery` call would now create above HTML structure only in XML mode of HTML (called also as XHTML) but in regular HTML mode you would now get: +jQuery 3.5.0 has changed `jQuery.htmlPrefilter` to be an identity function. In HTML mode auto-closing tags are being replaced with their opening tags, making `
` interpreted as `
`; the browser will automatically close these tags at the end of input. That means that the above `jQuery` call would now create above HTML structure only in XML mode of HTML (called also as XHTML) but in regular HTML mode you would now get: ```html
@@ -55,3 +57,9 @@ do this: ```js jQuery( "
" ); ``` + +One popular input that still works in jQuery 3.5.0 or newer is the one with a single tag with or without attributes: +```js +jQuery( "
" ); +``` +This is becuse it's XHTML-compliant and in HTML the parser first changes it to just the opening tag: `
` but then auto-closes it when it reaches the end of input. From 326bc7b8311090abf2cf414eb116b0068bafb7ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82=C4=99biowski-Owczarek?= Date: Fri, 5 Jun 2020 18:58:41 +0200 Subject: [PATCH 2/2] Upgrade guide: Apply suggestions from code review Co-Authored-By: Dave Methvin --- pages/upgrade-guide/3.5.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/upgrade-guide/3.5.md b/pages/upgrade-guide/3.5.md index 120a3cd..c86d9b4 100644 --- a/pages/upgrade-guide/3.5.md +++ b/pages/upgrade-guide/3.5.md @@ -40,7 +40,7 @@ would create the following structure: ``` because `
` was replaced with `
` & `` with ``. -jQuery 3.5.0 has changed `jQuery.htmlPrefilter` to be an identity function. In HTML mode auto-closing tags are being replaced with their opening tags, making `
` interpreted as `
`; the browser will automatically close these tags at the end of input. That means that the above `jQuery` call would now create above HTML structure only in XML mode of HTML (called also as XHTML) but in regular HTML mode you would now get: +In jQuery 3.5.0, the `jQuery.htmlPrefilter` method always returns its argument unchanged. Modern browsers usually parse and render HTML strings in HTML mode. Elements such as `

` and `` are never self-closing in HTML, so the browser interprets a string like `

` as `

` and leaves the tags open. The browser closes the tags at the end of the string or at an element that cannot be contained in the element, so another `

` tag closes an existing open `

` tag. ```html

@@ -62,4 +62,4 @@ One popular input that still works in jQuery 3.5.0 or newer is the one with a si ```js jQuery( "
" ); ``` -This is becuse it's XHTML-compliant and in HTML the parser first changes it to just the opening tag: `
` but then auto-closes it when it reaches the end of input. +This is becuse it's XHTML-compliant and in HTML the parser first changes it to just the opening tag: `
` but then immediately auto-closes it as it reaches the end of input.