jQuery - Selector 정규식

06 Feb 2021 in Frontend / Scripts on Selector, Jquery

• 1. Attribute Contains Prefix Selector [name|=”value”]
• 2. Attribute Contains Selector [name*=”value”]
• 3. Attribute Contains Word Selector [name~=”value”]
• 4. Attribute Ends With Selector [name$=”value”]
• 5. Attribute Equals Selector [name=”value”]
• 6. Attribute Not Equal Selector [name!=”value”]
• 7. Attribute Starts With Selector [name^=”value”]
• 8. Multiple Attribute Selector [name=”value”][name2=”value2”]

1. Attribute Contains Prefix Selector [name|=”value”]

value 문자와 일치하되 연속된 글로 연결되지 않은 문자를 찾을 때

$("input[name|="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="chiptuneTest" value="" /> // NOT OK

2. Attribute Contains Selector [name*=”value”]

value에 해당하는 문자가 앞,뒤,중간 중 어디에 있어도 상관없이 찾을 때

$("input[name*="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="chiptuneTest" value="" /> // OK
<input type="text" name="TestchiptuneTest" value="" /> // OK

3. Attribute Contains Word Selector [name~=”value”]

value에 해당하는 문자가 뒤(끝)에 존재하는 것을 찾을 때 (공백 뒤에)

$("input[name~="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // NOT OK
<input type="text" name="chiptune-test" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK
<input type="text" name="Test chiptune" value="" /> // OK

4. Attribute Ends With Selector [name$=”value”]

value에 해당하는 문자가 뒤(끝)에 존재하는 것을 찾을 때

$("input[name$="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // NOT OK
<input type="text" name="chiptune-test" value="" /> // NOT OK
<input type="text" name="Test2chiptune" value="" /> // OK
<input type="text" name="Testchiptune" value="" /> // OK

5. Attribute Equals Selector [name=”value”]

value에 해당하는 문자 일치하는 것을 찾을 때

$("input[name="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // NOT OK
<input type="text" name="Test2chiptune" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK

6. Attribute Not Equal Selector [name!=”value”]

value에 해당하는 문자 일치하지 않는 것을 찾을 때

$("input[name!="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // NOT OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="Test2chiptune" value="" /> // OK
<input type="text" name="Testchiptune" value="" /> // OK

7. Attribute Starts With Selector [name^=”value”]

value로 시작하는 문자를 찾을 때

$("input[name^="chiptune"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="Test2chiptune" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK

8. Multiple Attribute Selector [name=”value”][name2=”value2”]

여러개를 동시에 검색할때

$("input[name="chiptune"][name="chiptune-test"]").val("123");

<input type="text" name="chiptune" value="" /> // OK
<input type="text" name="chiptune-test" value="" /> // OK
<input type="text" name="Test2chiptune" value="" /> // NOT OK
<input type="text" name="Testchiptune" value="" /> // NOT OK