From 5a6be71791a0cc7199c20d2ac1f248612b805518 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Sun, 21 Jan 2018 21:02:16 +0100
Subject: [PATCH] Remove escaping selector and add a warning to inform folks to
 escape their selectors (#25390)

---
 docs/4.0/getting-started/javascript.md |  5 +++++
 js/src/util.js                         | 14 --------------
 js/tests/unit/util.js                  | 14 +-------------
 3 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md
index 72d1e14ecd..0c1eb5f394 100644
--- a/docs/4.0/getting-started/javascript.md
+++ b/docs/4.0/getting-started/javascript.md
@@ -32,6 +32,11 @@ Alternatively, to target a specific plugin, just include the plugin's name as a
 $(document).off('.alert.data-api')
 {% endhighlight %}
 
+{% callout warning %}
+##### Escaping selectors
+If you use special selectors, for example: `collapse:Example`, be sure to escape them, because they'll be passed through jQuery.
+{% endcallout %}
+
 ## Events
 
 Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
diff --git a/js/src/util.js b/js/src/util.js
index 6e32e955d0..7e5d5de5c6 100644
--- a/js/src/util.js
+++ b/js/src/util.js
@@ -72,15 +72,6 @@ const Util = (($) => {
     }
   }
 
-  function escapeId(selector) {
-    // We escape IDs in case of special selectors (selector = '#myId:something')
-    // $.escapeSelector does not exist in jQuery < 3
-    selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1)
-      : selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1')
-
-    return selector
-  }
-
   /**
    * --------------------------------------------------------------------------
    * Public Util Api
@@ -105,11 +96,6 @@ const Util = (($) => {
         selector = element.getAttribute('href') || ''
       }
 
-      // If it's an ID
-      if (selector.charAt(0) === '#') {
-        selector = escapeId(selector)
-      }
-
       try {
         const $selector = $(document).find(selector)
         return $selector.length > 0 ? selector : null
diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js
index e56bef18eb..83eb601a51 100644
--- a/js/tests/unit/util.js
+++ b/js/tests/unit/util.js
@@ -4,7 +4,7 @@ $(function () {
   QUnit.module('util')
 
   QUnit.test('Util.getSelectorFromElement should return the correct element', function (assert) {
-    assert.expect(5)
+    assert.expect(2)
 
     var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture'))
     assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body')
@@ -12,18 +12,6 @@ $(function () {
     // Not found element
     var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture'))
     assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
-
-    // Should escape ID and find the correct element
-    var $el3 = $('<div data-target="#collapse:Example"></div>').appendTo($('#qunit-fixture'))
-    $('<div id="collapse:Example"></div>').appendTo($('#qunit-fixture'))
-    assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example')
-
-    // If $.escapeSelector doesn't exist in older jQuery versions (< 3)
-    var tmpEscapeSelector = $.escapeSelector
-    delete $.escapeSelector
-    assert.ok(typeof $.escapeSelector === 'undefined', '$.escapeSelector undefined')
-    assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example')
-    $.escapeSelector = tmpEscapeSelector
   })
 
   QUnit.test('Util.typeCheckConfig should thrown an error when a bad config is passed', function (assert) {