move from '#' to '.' for object key matching

Author: lloyd

site/css/style.css

@@ -63,17 +63,17 @@ div.content {
 .json {
     background-color: #333;
     padding: .5em 1em .5em 1em;
+    border: 3px solid #444;
+    border-radius: 1em;
+    -moz-border-radius: 1em;
+    -webkit-border-radius: 1em;
 }
 
 #splash .sample {
     width: 250px;
     float: right;
     margin-left: 1em;
     margin-top: 3em;
-    border: 3px solid #444;
-    border-radius: 1em;
-    -moz-border-radius: 1em;
-    -webkit-border-radius: 1em;
     font-size: 90%;
 }
 
@@ -132,10 +132,6 @@ pre.doc {
     float: right;
     padding: 1em 3em 1em 3em;
     padding-right: 160px;
-    border: 3px solid #444;
-    border-radius: 1em;
-    -moz-border-radius: 1em;
-    -webkit-border-radius: 1em;
     font-size: 90%;
 }
 
@@ -170,4 +166,10 @@ pre.doc {
     color: #9f9;
     font-size: 90%;
     width: 300px;
-}
+}
+
+#cred {
+    padding-top: 2em;
+}
+
+#cred > pre {

site/index.html

@@ -9,7 +9,7 @@
     <div id="header">
       <div class="content">
         <div class="title">json<b>:</b>select<b>()</b></div>
-        <div class="nav"> <a href="#overview">Overview</a> | <a href="#tryit">Try It!</a> | <a href="#docs">Docs</a> | <a href="https://github.com/lloyd/JSONSelect">Code</a> | <a href="mailto:jsonselect@librelist.com">Contact</a> </div>
+        <div class="nav"> <a href="#overview">Overview</a> | <a href="#tryit">Try It!</a> | <a href="#docs">Docs</a> | <a href="https://github.com/lloyd/JSONSelect">Code</a> | <a href="mailto:jsonselect@librelist.com">Contact</a> | <a href="#cred">Credit</a> </div>
         <div class="subtitle">CSS-like selectors for JSON.</div>
       </div>
     </div>
@@ -33,10 +33,10 @@
   "license": "<a href="http://creativecommons.org/licenses/by-sa/3.0/us/">(cc) BY-SA</a>"
 }</pre></div>
         <div class="pitch">
-        <p>JSONSelect is a selector language for JSON.</p>
+        <p>JSONSelect is an <i>experimental</i> selector language for JSON.</p>
+        <p>It makes it easy to access data  in complex JSON documents.</p>
         <p>It <i>feels like</i> CSS.</p>
-        <p>It's easy to learn.</p>
-        <p>You should <a href="#">give it a try</a>.
+        <p>Why not <a href="#tryit">give it a try</a>?
         </div>
       </div>
       <div id="tryit" style="display: none" class="content">
@@ -67,23 +67,24 @@
         "aisle"
     ],
     "drinkPreference": [
-        "beer",
         "whiskey",
+        "beer",
         "wine"
     ],
     "weight": 172
 }
         </pre>
         <div class="selectors">
           <div class="title"> Choose A Selector... </div>
-          <div class="selector">#languagesSpoken #language</div>
-          <div class="selector">#drinkPreference :first-child</div>
+          <div class="selector">.languagesSpoken .language</div>
+          <div class="selector">.drinkPreference :first-child</div>
+          <div class="selector">.name > *</div>
+          <div class="selector">.seatingPreference :nth-child(1)</div>
           <div class="selector">string:first-child</div>
-          <div class="selector">#name > #first, #name > #last</div>
-          <div class="selector">#language</div>
-          <div class="selector">#"weight"</div>
-          <div class="selector">#favoriteColor</div>
-          <div class="selector">string#favoriteColor</div>
+          <div class="selector">."weight"</div>
+          <div class="selector">.language</div>
+          <div class="selector">.favoriteColor</div>
+          <div class="selector">string.favoriteColor</div>
           <div class="selector">string:last-child</div>
           <div class="selector">string:nth-child(-n+2)</div>
           <div class="selector">string:nth-child(odd)</div>
@@ -94,6 +95,18 @@
           <div class="selector">string</div>
         </div>
       </div>
+      <div style="display: none" id="cred" class="content">
+        <p>JSONSelect is dedicated to sad code everywhere that looks like this:</p>
+        <pre class="json">if (foo && foo.bar && foo.bar.baz && foo.bar.baz.length > 2)
+    return foo.bar.baz[2];
+return undefined;</pre>
+        <p>It was created by <a href="http://trickyco.de/">Lloyd Hilaiel</a>.</p>
+        <p><a href="http://blog.mozilla.com/dherman/">Dave Herman</a> provided the name, and lots of encouragement.</p>
+        <p><a href="http://open-mike.org/">Mike Hanson</a> gave deep feedback and ideas.</p>
+        <p><a href="http://ejohn.org/">John Resig</a> unwittingly contributed his <a href="http://ejohn.org/blog/selectors-that-people-actually-use/">design thoughts</a>.</p>
+        <p><a href="http://json.org/">JSON</a> and <a href="http://www.w3.org/TR/css3-selectors/">CSS3 Selectors</a> are the prerequisites to JSONSelect's existence, so thanks to you guys too.</p>
+        <p></p>
+      </div>
     </div>
 
 <a href="https://github.com/lloyd/JSONSelect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a>

site/js/nav.js

@@ -6,13 +6,16 @@ $(document).ready(function() {
         if (location.hash === "#tryit") {
             $("#tryit input").val("").keyup();
             $("#tryit").fadeIn(400, function() {
-                $("#tryit input").val("#drinkPreference :first-child").keyup();
+                $("#tryit input").val(".languagesSpoken .language").keyup();
             });
+        } else if (location.hash === "#cred") {
+            $("#main > .content").hide();
+            $("#cred").fadeIn(400);
         } else {
             $("#splash").fadeIn(400);
         }
     });
 
     // Trigger the event (useful on page load).
-    $(window).hashchange();    
+    $(window).hashchange();
 });

src/jsonselect.js

@@ -17,7 +17,7 @@
         "nmi": "multiple ids not allowed",
         "pcny": "psuedo class functions not yet supported",
         "se": "selector expected",
-        "sra": "string required after '#'",
+        "sra": "string required after '.'",
         "uc": "unrecognized char",
         "ujs": "unclosed json string",
         "upc": "unrecognized psuedo class"
@@ -35,7 +35,7 @@
         str: 4, // string
     };
 
-    var pat = /^(?:([\r\n\t\ ]+)|([*#,>])|(string|boolean|null|array|object|number)|(:(?:root|first-child|last-child|only-child))|(:(?:nth-child|nth-last-child))|(:\w+)|(\"(?:[^\\]|\\[^\"])*\")|(\")|((?:[_a-zA-Z]|[^\0-\0177]|\\[^\r\n\f0-9a-fA-F])(?:[_a-zA-Z0-9-]|[^\u0000-\u0177]|(?:\\[^\r\n\f0-9a-fA-F]))*))/;
+    var pat = /^(?:([\r\n\t\ ]+)|([*.,>])|(string|boolean|null|array|object|number)|(:(?:root|first-child|last-child|only-child))|(:(?:nth-child|nth-last-child))|(:\w+)|(\"(?:[^\\]|\\[^\"])*\")|(\")|((?:[_a-zA-Z]|[^\0-\0177]|\\[^\r\n\f0-9a-fA-F])(?:[_a-zA-Z0-9-]|[^\u0000-\u0177]|(?:\\[^\r\n\f0-9a-fA-F]))*))/;
     var exprPat = /^\s*\(\s*(?:([+-]?)([0-9]*)n\s*(?:([+-])\s*([0-9]))?|(odd|even)|([+-]?[0-9]+))\s*\)/;
     var lex = function (str, off) {
         if (!off) off = 0;
@@ -99,7 +99,7 @@
         while (true) {
             if (l === undefined) {
                 break;
-            } else if (l[1] === '#') {
+            } else if (l[1] === '.') {
                 l = lex(str, (off = l[0]));
                 if (!l || l[1] !== toks.str) te("sra");
                 if (s.id) te("nmi");

src/test/lex_test.html

@@ -24,8 +24,8 @@ <h2> Tests of the JSONSelect lexer </h2>
 [1, "*"]
 $ JSONSelect._lex(",");
 [1, ","]
-$ JSONSelect._lex("#");
-[1, "#"]
+$ JSONSelect._lex(".");
+[1, "."]
 </pre>
 </div>
 
@@ -99,7 +99,7 @@ <h2> Tests of the JSONSelect lexer </h2>
 </div>
 
 <div class="test">
-identifiers (like after '#')
+identifiers (like after '.')
 <pre class="doctest">
 $ JSONSelect._lex("foo");
 [3, 4, "foo"]

src/test/match_test.html

@@ -36,21 +36,21 @@ <h2> Tests of the JSONSelect matcher </h2>
 <div class="test">
 IDs
 <pre class="doctest">
-$ JSONSelect.match("#foo", {foo: "aMatch", bar: [ { foo: "anotherMatch" } ] });
+$ JSONSelect.match(".foo", {foo: "aMatch", bar: [ { foo: "anotherMatch" } ] });
 ["aMatch", "anotherMatch"]
 </pre>
 </div>
 
 <div class="test">
 Descendants
 <pre class="doctest">
-$ JSONSelect.match("#foo #bar", {foo: { baz: 1, bar: 2 }, bar: 3});
+$ JSONSelect.match(".foo .bar", {foo: { baz: 1, bar: 2 }, bar: 3});
 [2]
-$ JSONSelect.match("#foo > #bar", {foo: { baz: 1, bar: 2 }, bar: 3});
+$ JSONSelect.match(".foo > .bar", {foo: { baz: 1, bar: 2 }, bar: 3});
 [2]
-$ JSONSelect.match("#foo > #bar", {foo: { baz: { bar: 4 }, bar: 2 }, bar: 3});
+$ JSONSelect.match(".foo > .bar", {foo: { baz: { bar: 4 }, bar: 2 }, bar: 3});
 [2]
-$ JSONSelect.match("#foo #bar", {foo: { baz: { bar: 4 }, bar: 2 }, bar: 3});
+$ JSONSelect.match(".foo .bar", {foo: { baz: { bar: 4 }, bar: 2 }, bar: 3});
 [4, 2]
 </pre>
 </div>

src/test/parse_test.html

@@ -18,23 +18,23 @@ <h2> Tests of the JSONSelect parser </h2>
 <div class="test">
 Selectors
 <pre class="doctest">
-$ JSONSelect._parse("#foo");
+$ JSONSelect._parse(".foo");
 [{id: "foo"}]
-$ JSONSelect._parse('#" foo "');
+$ JSONSelect._parse('." foo "');
 [{id: " foo "}]
-$ JSONSelect._parse("string#foo:last-child");
+$ JSONSelect._parse("string.foo:last-child");
 [{a: 0, b: 1, id: "foo", pf: ":nth-last-child", type: "string"}]
-$ JSONSelect._parse("string#foo#bar");
+$ JSONSelect._parse("string.foo.bar");
 Error: multiple ids not allowed
-$ JSONSelect._parse("string#foo:first-child#bar");
+$ JSONSelect._parse("string.foo:first-child.bar");
 Error: multiple ids not allowed
-$ JSONSelect._parse("string:last-child#foo:first-child#bar");
+$ JSONSelect._parse("string:last-child.foo:first-child.bar");
 Error: multiple pseudo classes (:xxx) not allowed
-$ JSONSelect._parse("string#");
-Error: string required after '#'
+$ JSONSelect._parse("string.");
+Error: string required after '.'
 $ JSONSelect._parse("string:bogus");
 Error: unrecognized psuedo class
-$ JSONSelect._parse("string#xxx\\@yyy");
+$ JSONSelect._parse("string.xxx\\@yyy");
 [{id: "xxx@yyy", type: "string"}]
 $ JSONSelect._parse(" ");
 Error: selector expected
@@ -46,15 +46,15 @@ <h2> Tests of the JSONSelect parser </h2>
 <div class="test">
 Combinators
 <pre class="doctest">
-$ JSONSelect._parse("#foo #bar");
+$ JSONSelect._parse(".foo .bar");
 [{id: "foo"}, {id: "bar"}]
-$ JSONSelect._parse("string#foo , number#foo");
+$ JSONSelect._parse("string.foo , number.foo");
 [",", [{id: "foo", type: "string"}], [{id: "foo", type: "number"}]]
-$ JSONSelect._parse("string > #foo number#bar");
+$ JSONSelect._parse("string > .foo number.bar");
 [{type: "string"}, ">", {id: "foo"}, {id: "bar", type: "number"}]
-$ JSONSelect._parse("string > #foo number#bar, object");
+$ JSONSelect._parse("string > .foo number.bar, object");
 [",", [{type: "string"}, ">", {id: "foo"}, {id: "bar", type: "number"}], [{type: "object"}]]
-$ JSONSelect._parse("string > #foo number#bar, object, string, #\"baz bing\", :root");
+$ JSONSelect._parse("string > .foo number.bar, object, string, .\"baz bing\", :root");
 [
   ",",
   [{type: "string"}, ">", {id: "foo"}, {id: "bar", type: "number"}],

tests/basic_grouping.selector

@@ -1 +1 @@
-string#level,number
+string.level,number

tests/basic_id.selector

@@ -1 +1 @@
-#favoriteColor
+.favoriteColor

tests/basic_id_multiple.selector

@@ -1 +1 @@
-#language
+.language