Wie kann ein Wildcard-Elementname mit „querySelector()“ oder „querySelectorAll()“ in JavaScript abgeglichen werden?

Gibt es eine Möglichkeit, einen Wildcard-Elementnamensabgleich mit durchzuführen? querySelector oder querySelectorAll?

Das XML-Dokument, das ich zu analysieren versuche, ist im Grunde eine flache Liste von Eigenschaften

• Ich muss Elemente finden, deren Namen bestimmte Zeichenfolgen enthalten.
• Ich sehe Unterstützung für Platzhalter in Attributabfragen, aber nicht für die Elemente selbst.

Jede Lösung außer der Rückkehr zur Verwendung des scheinbar veralteten XPath (IE9 hat ihn eingestellt) ist akzeptabel.

[id^='someId'] stimmt mit allen IDs überein, die mit beginnen someId.

[id$='someId'] stimmt mit allen IDs überein, die mit enden someId.

[id*='someId'] stimmt mit allen enthaltenden IDs überein someId.

Wenn Sie auf der Suche nach dem sind name Attribut einfach ersetzen id mit name.

Wenn Sie über den Tag-Namen des Elements sprechen, glaube ich nicht, dass es eine Möglichkeit gibt, ihn zu verwenden querySelector

Ich habe über Einzeiler mit querySelector() herumgespielt und bin hier gelandet. Ich habe eine mögliche Antwort auf die OP-Frage mithilfe von Tag-Namen und querySelector(), mit Dank an @JaredMcAteer für die Beantwortung MEINER Frage, auch bekannt als RegEx-like stimmt mit querySelector() in Vanilla Javascript überein

Ich hoffe, dass das Folgende nützlich ist und den Bedürfnissen des OP oder allen anderen entspricht:

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

Dann können wir zum Beispiel das src-Zeug usw. besorgen …

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)

Legen Sie tagName als explizites Attribut fest:

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

Ich selbst brauchte das für ein XML-Dokument mit der Endung „Nested Tags“. _Sequence. Sehen JaredMcAteer Antwort für weitere Details.

document.querySelectorAll('[tagName$="_Sequence"]')

Ich habe nicht gesagt, dass es hübsch wäre 🙂 PS: Ich würde es empfehlen tag_name über tagName, damit es beim Lesen von „computergenerierten“, impliziten DOM-Attributen nicht zu Störungen kommt.

Ich habe gerade dieses kurze Skript geschrieben; scheint zu funktionieren.

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"

Viele der Antworten oben gefielen mir, aber ich bevorzuge, dass meine Abfragen nur für Klassen/IDs ausgeführt werden, damit sie nicht jedes Element durchlaufen müssen. Dies ist eine Kombination aus Code von @bigiCrab und @JaredMcAteer

// class exactly matches abc
const exactAbc = document.querySelectorAll("[class="abc"]")

// class begins with abc
const startsAbc = document.querySelectorAll("[class^='abc']")

// class contains abc
const containsAbc = document.querySelectorAll("[class*='abc']")

// class contains white-space separated word exactly matching abc
const wordAbc = document.querySelectorAll("[class~='abc']")

// class ends with abc
const endsAbc = document.querySelectorAll("[class$='abc']")

Ersetzen Sie „class“ durch „id“ oder „href“, um andere Übereinstimmungen zu erhalten. Weitere Beispiele finden Sie im unten verlinkten Artikel.

Referenz:

1. CSS-Attributselektoren auf MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Ich suche Regex + nicht + MultiClass Selektor, und das habe ich bekommen.

Ich hoffe, das hilft jemandem, der das Gleiche sucht!

// contain abc class
"div[class*='abc']" 

// contain exact abc class
"div[class~='abc']" 

// contain exact abc & def(case-insensitively)
"div[class~='abc'][class*='DeF'i]" 

// contain exact abc but not def(case-insensitively)
"div[class~='abc']:not([class*='DeF'i])" 

CSS-Selektor-Dokument: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

einfacher Test: https://codepen.io/BIgiCrab/pen/BadjbZe

Es gibt zum Beispiel ein Formular wie unten gezeigt:

<form id="my-form" method="post">
  <input type="text" name="my-first-name" value="John">
  <input type="text" name="my last name" value="Smith">
</form>

Dann können Sie diese Selektoren unten entsprechend verwenden 6.1. Attributpräsenz- und Wertselektoren Und 6.2. Teilstring-Matching-Attributselektoren.

input[name] wählt alle aus <input>s welche haben name Attribut:

document.querySelectorAll('input[name]');
// "my-first-name" and "my last name"

input[name="my last name"] wählt alle aus <input>Es ist wessen name Attribut ist genau my last name:

document.querySelectorAll('input[name="my last name"]');
// "my last name"

input[name~="name"] wählt alle aus <input>Es ist wessen name Die durch Leerzeichen getrennten Wörter des Attributs enthalten my last name:

document.querySelectorAll('input[name~="name"]');
// "my last name"

input[name|="my"] wählt alle aus <input>Es ist wessen name Attribut beginnt mit my mit - So my-:

document.querySelectorAll('input[name|="my"]');
// "my-first-name"

input[name|="my last name"] wählt alle aus <input>Es ist wessen name Attribut ist genau my last name:

document.querySelectorAll('input[name|="my last name"]');
// "my last name"

input[name^="my "] wählt alle aus <input>Es ist wessen name Attribut beginnt mit my :

document.querySelectorAll('input[name^="my "]');
// "my last name"

input[name$="ame"] wählt alle aus <input>Es ist wessen name Attribut endet mit ame:

document.querySelectorAll('input[name$="ame"]');
// "my-first-name" and "my last name"

input[name*="st-"] wählt alle aus <input>Es ist wessen name Attribut enthält st-:

document.querySelectorAll('input[name*="st-"]');
// "my-first-name"

Zusätzlich, input:not([name="my last name"]) wählt alle aus <input>Es ist wessen name Attribut enthält nicht my last name entsprechend 4.3. Die Negation (Matches-None)-Pseudoklasse: ‘:not()’:

document.querySelectorAll('input:not([name="my last name"])');
// "my-first-name"

Und Sie können sagen form#my-form vor input[name^="my"] zur Auswahl <input>Genauer gesagt logisches UND (&&) Wie nachfolgend dargestellt:

document.querySelectorAll('form#my-form input[name^="my"]');
// "my-first-name" and "my last name"

Und das können Sie auch input:not([name^="last"]):not([name*="st"][value="Smith"]) zur Auswahl <input>Genauer gesagt logisches UND (&&) Wie nachfolgend dargestellt:

document.querySelectorAll('input:not([name^="my-"]):not([name*="st"][value="John"])');
// "my last name"

Und das können Sie auch input[name*="first"], input[name="my last name"] zur Auswahl <input>Genauer gesagt logisches ODER (||) Wie nachfolgend dargestellt:

document.querySelectorAll('input[name*="first"], input[name="my last name"]')
// "my-first-name" and "my last name"