Move `getElementFromSelector` & `getSelectorFromElement` to SelectorEngine (#36027)

* Move `getElementFromSelector` & getSelectorFromElement` inside selector-engine.js, in order to use SelectorEngine methods, avoiding raw querySelector usage

* add `getMultipleElementsFromSelector` helper

Co-authored-by: Julien Déramond <[email protected]>

1 files changed, 47 insertions, 0 deletions

diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js
index 63bc2d176..ad10a6083 100644
--- a/js/src/dom/selector-engine.js
+++ b/js/src/dom/selector-engine.js
@@ -77,6 +77,53 @@ const SelectorEngine = {
     ].map(selector => `${selector}:not([tabindex^="-"])`).join(',')
 
     return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
+  },
+
+  getSelector(element) {
+    let selector = element.getAttribute('data-bs-target')
+
+    if (!selector || selector === '#') {
+      let hrefAttribute = element.getAttribute('href')
+
+      // The only valid content that could double as a selector are IDs or classes,
+      // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
+      // `document.querySelector` will rightfully complain it is invalid.
+      // See https://github.com/twbs/bootstrap/issues/32273
+      if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
+        return null
+      }
+
+      // Just in case some CMS puts out a full URL with the anchor appended
+      if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
+        hrefAttribute = `#${hrefAttribute.split('#')[1]}`
+      }
+
+      selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
+    }
+
+    return selector
+  },
+
+  getSelectorFromElement(element) {
+    const selector = SelectorEngine.getSelector(element)
+
+    if (selector) {
+      return SelectorEngine.findOne(selector) ? selector : null
+    }
+
+    return null
+  },
+
+  getElementFromSelector(element) {
+    const selector = SelectorEngine.getSelector(element)
+
+    return selector ? SelectorEngine.findOne(selector) : null
+  },
+
+  getMultipleElementsFromSelector(element) {
+    const selector = SelectorEngine.getSelector(element)
+
+    return selector ? SelectorEngine.find(selector) : []
   }
 }