Escape ID in Util.getSelectorFromElement

twbs · Nov 7, 2017 · 5268aa0 · 5268aa0
1 parent 26dc17b
commit 5268aa0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/js/src/util.js b/js/src/util.js
@@ -87,6 +87,10 @@ const Util = (($) => {
     }
   }
 
+  // Thanks to learn.jquery.com see : http://bit.ly/1Tyr4SZ
+  function escapeId(selector) {
+    return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1')
+  }
 
   /**
    * --------------------------------------------------------------------------
@@ -112,6 +116,11 @@ 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
@@ -4,13 +4,19 @@ $(function () {
   QUnit.module('util')
 
   QUnit.test('Util.getSelectorFromElement should return the correct element', function (assert) {
-    assert.expect(2)
+    assert.expect(3)
+
     var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture'))
     assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body')
 
     // not found element
     var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture'))
     assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
+
+    // should escape ID and found 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')
   })
 
   QUnit.test('Util.typeCheckConfig should thrown an error when a bad config is passed', function (assert) {