2013-07-03 14 views
7

dieser reguläre Ausdruck sollte mit einem HTML-Start-Tag übereinstimmen, denke ich.Bedeutung von ( /?) In Regex/ist ( w +) ([^>] *?) Eine Redundanz?

var results = html.match(/<(\/?)(\w+)([^>]*?)>/);

Ich sehe es sollte zuerst die < erfassen, aber dann bin ich verwirrt, was das Einfangen (\/?) erreicht. Bin ich richtig in Argumentation, dass die ([^>]*?)> sucht für jedes Zeichen außer >> = 0 mal? Wenn ja, warum ist die (\w+) Erfassung notwendig? Ist es nicht in den Zuständigkeitsbereich des fallen [^>]*?

+0

es findet End-Tags, die Sie kennen anstelle von ... das \ w erfasst den Tag-Namen zu einem Parameter anstelle Ersatz es mit dem Attribut-Abschnitt für eine Übereinstimmung zu bündeln, die Sie nicht benötigen es, aber wenn die regexp helfen, wenn in ein replace() recycelt wird ... – dandavis

Antwort

4

Nehmen Sie es von Token Token:

  • / beginnen regex wörtliche
  • < Spiel eine wörtliche <
  • (\/?) Spiel 0 oder 1 (?) wörtliche /, die von der \
  • entgangen ist
  • (\w+) passen Sie ein oder mehrere "Wortzeichen" an
  • ([^>]*?) lazily * Spiel null oder mehr (*?) von etwas, das kein >
  • > Spiel eine wörtliche >
  • / Ende regex wörtliche

lazily * ist - "?" Hinzufügen nach einem Wiederholungsquantifizierer wird es träge werden, was bedeutet, dass die Regex dem vorhergehenden Token die minimale Anzahl von Malen entspricht. Siehe die documentation.

Im Wesentlichen entspricht dieser reguläre Ausdruck "<", möglicherweise gefolgt von einem "/", gefolgt von einer beliebigen Anzahl von Buchstaben, Ziffern oder Unterstrichen, gefolgt von allem, was kein ">" ist, und schließlich gefolgt von ein ">".

Das Token (\w+) ist nicht redundant, da es gewährleistet, dass zwischen < und > mindestens ein Wortzeichen steht.

Bitte beachten Sie, dass attempting to parse HTML with regular expressions is generally a bad idea.

+0

Das "?" ist nicht redundant, falls mehr als ein HTML-Tag in derselben Zeile steht! –

+0

@TomLord Können Sie mir ein Beispiel zeigen, was Sie meinen? Danke – 1252748

+0

@TomLord Ich habe die Antwort bearbeitet, um einzuschließen, was das '*?' Tatsächlich tut. Ich habe selbst etwas Neues gelernt :) – jbabey

3

(\/?) Streichhölzer und fängt jede schließenden Tag, wie </i> vielleicht, oder </strong> wenn Sie mit ihnen vertraut sind?

andere Sache zu beachten ist, dass \w ist wirklich die Zeichenklasse [a-zA-Z_\d], so dass andere Charaktere wie =, ", etc. sind nicht aufeinander abgestimmt und wird jedoch durch [^>] angepasst werden. Und ja, Sie haben Recht.

+2

ist kein echtes tag ... – dandavis

+0

gut, Antworten wurden trotzdem bearbeitet, so dass wir beide verrückt aussehen ... – dandavis

+0

@ p.s.w.g Ja, es stimmt nicht mit der Regex überein. Es war nur ein Beispiel für den Schrägstrich, aber ich denke, ich benutze einfach einen anderen =/ – Jerry

2

Um Ihre letzte Frage zu beantworten, sind (\w+) und ([^>]*?) nicht redundant. Sie beide dienen wichtigen Funktionen im Ausdruck.

Dieser Ausdruck findet Start- oder End-Tags.

(\/?) entspricht einer /, aber die ? macht es optional.

(\w+) entspricht Wortzeichen, die hier mit dem Tag-Namen übereinstimmen sollen.

([^>]*?) soll Attribute entsprechen.

Also, wenn Sie die Zeichenfolge hatte <div class="text">,

Die (\w+) im Ausdruck würde div entsprechen und die ([^>]*?) würde class="text"

+0

Es ist wählerisch, aber das '([^>] *?)' Stimmt tatsächlich mit 'class =" text "' überein (einschließlich Leerzeichen nach 'div'). :) – tessi

+0

@tessi Du hast Recht, und wenn du meinen Beitrag redest, kannst du sehen, dass ich den Platz dort habe, aber er wird entfernt, wenn er angezeigt wird. Wenn jemand einen Weg vorschlagen kann, um den Raum zur Anzeige zu bringen, würde ich es begrüßen. –

+0

Har, das ist lustig. Ich werde dich nie wieder wegen diesem (spezifischen) Raum beschuldigen;) – tessi

0

Demo entsprechen (in Ruby, kein Javascript, aber es macht keinen Unterschied): http://www.rubular.com/r/bhw2O28qUr

Zusammenfassend ist es, End-Tags zu erfassen.

+1

und beginnende Tags scheint es. Danke für die Antwort und die coole Testseite! – 1252748

+0

Ich meinte "End-Tags" wie in, ist ein Begin-Tag und ist ein End-Tag. –

4

die Macht der debuggex Verwenden Sie ein Bild erzeugen :)

<(\/?)(\w+)([^>]*?)> 

wird so

Regular expression image

Edit live on Debuggex

ausgewertet werden Sie sehen, es passt HTML -Tags (öffnende und schließende Tags). Die Regex enthält drei Capture-Gruppen, die Erfassung der folgende:

  1. (\/?) Existenz / (es ist ein End-Tag, falls vorhanden)
  2. (\w+) Namen des Tags
  3. ([^>]*?) alles andere, bis der Tag schließt (zB Attribute)

So entspricht es <a href="#">. Interessanterweise passt es nicht <a data-fun="fun>nofun"> korrekt, da es bei der > innerhalb der data-fun Attribut endet. Obwohl (glaube ich) >is valid in an attribute value.

Eine andere lustige Sache ist, dass das Tag-Name-Capture nicht alle theoretisch gültigen XHTML-Tags erfasst. XHTML ermöglicht Letter | Digit | '.' | '-' | '_' | ':' | .. (Quelle: XHTML spec). (\w+) entspricht jedoch nicht ., - und :. Ein imaginäres <.foobar> Tag wird von diesem Regex nicht gefunden. Dies sollte jedoch keine wirklichen Auswirkungen auf das Leben haben.

Sie sehen, dass das Parsen von HTML mit RgExes eine riskante Sache ist. Sie könnten besser mit einem HTML-Parser sein.

Verwandte Themen