regexp vs indexOf (v57)

Revision 57 of this benchmark created on

Preparation HTML

<script>
  var str = "<body id="" class="html-ltr document" role="document">
<!--[if lte IE 8]>
<noscript><div class="global-notice">
<p><strong>Warning:</strong> The Mozilla Developer Network website employs emerging web standards that may not be fully supported in some versions of MicroSoft Internet Explorer. You can improve your experience of this website by enabling JavaScript.</p>
</div></noscript>
<![endif]-->
  <header id="masthead" class="minor">
    <div class="wrap">
      <ul id="nav-access">
        <li><a href="#language">Select language</a></li>
        <li><a href="#q">Skip to search</a></li>
        <li><a href="#content">Skip to main content</a></li>
      </ul>
    
      <div id="branding">
                <div id="logo"><a href="/en-US/"><img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Mozilla Developer Network" title="Mozilla Developer Network" width="62" height="71"> Mozilla Developer Network</a></div>
              </div>
      
      
      <nav id="nav">
        <ul id="nav-main" role="menubar">
          <li id="nav-main-topics" class="menu" role="menuitem"><a href="#nav-sub-topics" class="toggle" aria-haspopup="true" aria-labelledby="nav-main-topics" title="Explore other parts of MDN">Topics</a>
            <ul id="nav-sub-topics" class="sub-menu" aria-hidden="true">
              <li id="nav-sub-web"><a href="/en-US/web">Web</a></li>
              <li id="nav-sub-apps"><a href="/en-US/docs/apps">Apps</a></li>
              <li id="nav-sub-mobile"><a href="/en-US/mobile">Mobile</a></li>
              <li id="nav-sub-addons"><a href="/en-US/addons">Add-ons</a></li>
              <li id="nav-sub-mozilla"><a href="/en-US/mozilla">Mozilla</a></li>
            </ul>
          </li>
          <li id="nav-main-docs" class="menu" role="menuitem">
            <a href="/en-US/docs" class="docs toggle" aria-haspopup="true" aria-labelledby="nav-main-docs">Docs</a>
            <div id="nav-sub-docs" class="sub-menu" aria-hidden="true">
              <ul>
                <li>
                  <ul>
                    <li><a href="/en-US/docs/HTML">HTML</a></li>
                    <li><a href="/en-US/docs/DOM">DOM</a></li>
                    <li><a href="/en-US/docs/HTML/Using_HTML5_audio_and_video">Video</a></li>
                    <li><a href="/en-US/docs/HTML/Using_HTML5_audio_and_video">Audio</a></li>
                    <li><a href="/en-US/docs/SVG">SVG</a></li>
                    <li><a href="/en-US/docs/WebGL">WebGL</a></li>
                  </ul>
                </li>
                <li>
                  <ul>
                    <li><a href="/en-US/docs/HTML/HTML5">HTML5</a></li>
                    <li><a href="/en-US/docs/WebSockets">WebSockets</a></li>
                    <li><a href="/en-US/docs/HTML/Using_the_application_cache">Offline Cache</a></li>
                    <li><a href="/en-US/docs/DOM/Storage">Local Storage</a></li>
                    <li><a href="/en-US/docs/IndexedDB">IndexedDB</a></li>
                    <li><a href="/en-US/docs/Using_files_from_web_applications">File API</a></li>
                  </ul>
                </li>
                <li>
                  <ul>
                    <li><a href="/en-US/docs/CSS">CSS</a></li>
                    <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Gradients</a></li>
                    <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">Transforms</a></li>
                    <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions">Transitions</a></li>
                    <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations">Animations</a></li>
                    <li><a href="/en-US/docs/CSS/Media_queries">Media Queries</a></li>
                  </ul>
                </li>
                <li>
                  <ul>
                    <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
                    <li><a href="/en-US/docs/AJAX">AJAX</a></li>
                    <li><a href="/en-US/docs/HTML/Canvas">Canvas</a></li>
                    <li><a href="/en-US/docs/Using_geolocation">Geolocation</a></li>
                    <li><a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag &amp; Drop</a></li>
                    <li><a href="/en-US/docs/DOM/Using_web_workers">Web Workers</a></li>
                  </ul>
                </li>
              </ul>
              <p><a href="/en-US/docs">More docs&hellip;</a></p>
            </div>
          </li>
          <li id="nav-main-demos" role="menuitem"><a href="/en-US/demos/" class="demos">Demos</a></li>
          <li id="nav-main-learning" role="menuitem"><a href="/en-US/learn" class="learning">Learning</a></li>
          <li id="nav-main-community" class="menu" role="menuitem"><a href="#nav-sub-community" class="community toggle" aria-haspopup="true" aria-labelledby="nav-main-community">Community</a>
            <ul id="nav-sub-community" class="sub-menu">
              <li><a href="/en-US/events">Events</a></li>
              <li><a href="/en-US/promote">Promote</a></li>
              <li><a href="/en-US/docs/Project:How_to_Help">Contribute</a></li>
              <li><a href="/en-US/newsletter">Newsletter</a></li>
            </ul>
          </li>
        </ul>
      </nav>
          
      <ul class="user-state signed-out">
    <li class="user-signin menu">
    <form class="browserid" action="/en-US/users/browserid_verify" method="POST">
        <input id="next" name="next" type="hidden" value="/en-US/docs/DOM/Document.querySelector"/>
        <input required="required" type="hidden" name="assertion" id="id_assertion" />
                        <a href="#" target="_blank" class="browserid-signin toggle" aria-haspopup="true" title="Sign in with Persona">Sign in</a>
                <div class="browserid-info sub-menu" aria-hidden="true">
                <h3>What's this?</h3> <p>MDN has switched to <a href="https://persona.org/" target="_blank" rel="external">Persona</a>, a safe and simple way to sign in with just your e-mail address. <a href="http://identity.mozilla.com/post/12950196039/deploying-browserid-at-mozilla" rel="external">Learn more about why Mozilla is using Persona</a>.</p> <p><strong>Returning members:</strong> sign in with Persona and you'll be connected to your MDN profile (all your information is still here).</p> <p><strong>New members:</strong> sign in with Persona first, then you'll be able to set up your new MDN profile.</p>          <p><a href="#" target="_blank" class="browserid-signin" title="Sign in with Persona">Sign in</a></p>
        </div>
              </form>
    </li>
  </ul>
      
      <form id="site-search" method="get" action="http://www.google.com/search"
              data-url="/en-US/search">
        <p>
          <input type="text" role="search" placeholder="Search MDN" id="q" name="q" value="">
          <noscript><button type="submit">Search</button></noscript>
        </p>
        <input type="hidden" name="sitesearch" value="developer.mozilla.org">
        <div id="site-search-gg"></div>
      </form>

      <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
    </div>
  </header>

    

<!-- top toolbar -->
<section id="nav-toolbar"><div><div class="wrap">
  <!-- right floated navigation -->
  <nav id="tool-menus" role="navigation">
    <ul id="tools">
      <li class="menu">
        <a href="#page-tools" class="toggle">This page</a>
        <ul id="page-tools" class="sub-menu">
          <li class="page-print"> <a href="#" onclick="return window.print();"  title="Print page">Print this page</a></li>
                      <li><a href="/en-US/docs/new?parent=2968">New sub-page</a></li>
            <li><a href="/en-US/docs/new?clone=2968">Clone this page</a></li>
                            </ul>
      </li>
            <li class="menu">
        <a href="#" class="toggle">Languages</a>
        <ul id="translations">
                      <li><a rel="internal" href="/ja/docs/DOM/Document.querySelector" title="document.querySelector">日本語</a></li>
                      <li><a rel="internal" href="/pt-BR/docs/DOM/Document.querySelector" title="Document.querySelector">Português (do Brasil)</a></li>
                    
                      <li><a href="/en-US/docs/DOM/Document.querySelector$locales">Add translation</a></li>
                  </ul>
      </li>
          </ul>
  </nav>
  
  <!-- left crumb navigation -->
  <nav class="crumbs" role="navigation">
    <ol>
              <li class="crumb"><a href="/en-US/docs/DOM">Document Object Model (DOM)</a></li>
            <li class="crumb">Document.querySelector</li>
    </ol>
  </nav>
  
</div></div></section>



<section id="content">
  <div class="wrap">
    <div id="content-main" class="full">
      <article class="article" role="main" 
          data-current-revision="298571"
          data-refresh-message="Your changes were merged. However, something else has been edited, so this page will be refreshed to reflect the changes."
          data-cancel-edit-message="Abort editing in progress? Your unsaved changes will be discarded.">
      <header id="article-head">
        <div class="title">
            <h1 class="page-title">Document.querySelector</h1>
                    </div>
        <ul id="page-buttons">
            <li class="page-history"><a href="/en-US/docs/DOM/Document.querySelector$history">History</a></li>
                                                                                  <li class="page-edit"><a href="/en-US/docs/DOM/Document.querySelector$edit">Edit</a></li>
                    </ul>

        
               </header>

           
                                
            
      <div id="wikiArticle" class="page-content boxed">
                <div id="article-nav">
          <div class="page-toc">
            <h2>Table of Contents</h2>
            <ol>
              <li><a href="#Summary" rel="internal">Summary</a><li><a href="#Syntax" rel="internal">Syntax</a><code></code><code></code><li><a href="#Example" rel="internal">Example</a><code></code><li><a href="#Notes" rel="internal">Notes</a><code></code><code></code><code></code><li><a href="#Browser_Compatibility" rel="internal">Browser compatibility</a><li><a href="#Specification" rel="internal">Specification</a><li><a href="#See_also" rel="internal">See also</a><code></code><code></code><code></code>
            </ol>
          </div>
          <ul class="page-anchors">
            <li class="anchor-tags">
                              <a href="#page-tags">Tags</a>
                          </li>
            <li class="anchor-files">
                              <span title="This document has no attachments">Files</span>
                          </li>
          </ul>
        </div>
                                <div><span class="breadcrumbs domRef_breadcrumbs"> 
« <a href="/en-US/docs/Gecko_DOM_Reference">Gecko DOM Reference</a> 
</span></div>

<h2 id="Summary" name="Summary">Summary</h2>
<p>Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre><em>element</em> = document.querySelector(<em>selectors</em>);</pre>
<p>where</p>
<ul>
  <li><code>element</code> is an <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">element</a> object.</li>
  <li><code>selectors</code> is a string containing one or more CSS selectors separated by commas.</li>
</ul>

<h2 id="Example" name="Example">Example</h2>
<p>In this example, the first element in the document with the class "<code>myclass</code>" is returned:</p>
<pre class="brush: js">var el = document.querySelector(".myclass");
</pre>

<h2 id="Notes" name="Notes">Notes</h2>
<p>Returns <code>null</code> if no matches are found; otherwise, it returns the first matching element.</p>
<p>If the selector matches an ID and this ID is erroneously used several times in the document, it returns the first matching element.</p>
<p>Throws a <code>SYNTAX_ERR</code> exception if the specified group of selectors is invalid.</p>
<p><code>querySelector()</code> was introduced in the Selectors API.</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p></p><div class="htab"> 
    <a></a> 
    <ul> 
        <li class="selected"><a>Desktop</a></li> 
        <li><a>Mobile</a></li> 
    </ul> 
</div><p></p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1</td>
        <td>3.5 (1.9.1)<br>
          <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=416317" title="">bug  416317</a></td>
        <td>8</td>
        <td>10</td>
        <td>3.2 (525.3)<br>
          <a class="external" href="https://bugs.webkit.org/show_bug.cgi?id=16587" title="">WebKit bug 16587</a></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>yes</td>
        <td>9</td>
        <td>10.0</td>
        <td>3.2</td>
      </tr>
    </tbody>
  </table>
</div>

<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
</ul>

<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><code><a href="/en-US/docs/DOM/document.querySelectorAll" title="/en-US/docs/DOM/document.querySelectorAll">document.querySelectorAll()</a></code></li>
  <li><code><a href="/en-US/docs/DOM/element.querySelector" title="/en-US/docs/DOM/element.querySelector">element.querySelector()</a></code></li>
  <li><code><a href="/en-US/docs/DOM/element.querySelectorAll" title="/en-US/docs/DOM/element.querySelectorAll">element.querySelectorAll()</a></code></li>
  <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a></li>
</ul>
                  </div>
    <section class="page-meta">
      
            <section id="page-tags">
        <h2>Tags (4)</h2>
        <div id="deki-page-tags">
          <ul class="tags tagit ui-widget ui-widget-content">
                        <li class="tagit-choice ui-widget-content ui-state-default">
                <a class="text tagit-label" href="/en-US/docs/tag/Fixit">Fixit</a>
            </li>
                        <li class="tagit-choice ui-widget-content ui-state-default">
                <a class="text tagit-label" href="/en-US/docs/tag/Gecko%20DOM%20Reference">Gecko DOM Reference</a>
            </li>
                        <li class="tagit-choice ui-widget-content ui-state-default">
                <a class="text tagit-label" href="/en-US/docs/tag/DOM">DOM</a>
            </li>
                        <li class="tagit-choice ui-widget-content ui-state-default">
                <a class="text tagit-label" href="/en-US/docs/tag/Selectors">Selectors</a>
            </li>
                      </ul>
        </div>
      </section>
      
      
      <section id="doc-contributors">
        Contributors to this page: <a href="/en-US/profiles/Sheppy">Sheppy</a>, <a href="/en-US/profiles/MatrixFrog">MatrixFrog</a>, <a href="/en-US/profiles/Marcoos">Marcoos</a>, <a href="/en-US/profiles/J%C3%BCrgen%20Jeka">Jürgen Jeka</a>, <a href="/en-US/profiles/urkle">urkle</a>, <a href="/en-US/profiles/grendel">grendel</a>, <a href="/en-US/profiles/paul.irish">paul.irish</a>, <a href="/en-US/profiles/ethertank">ethertank</a>, <a href="/en-US/profiles/Brettz9">Brettz9</a>, <a href="/en-US/profiles/ebidel">ebidel</a>, <a href="/en-US/profiles/josiewern">josiewern</a>, <a href="/en-US/profiles/Jonathan_Watt">Jonathan_Watt</a>, <a href="/en-US/profiles/myakura">myakura</a>, <a href="/en-US/profiles/nhoizey">nhoizey</a>, <a href="/en-US/profiles/Bzbarsky">Bzbarsky</a>
                          <br />
          Last updated by:  
          <a href="/en-US/profiles/ethertank">ethertank</a>, 
          <time datetime="2012-08-19T20:59:13-07:00">Aug 19, 2012 8:59:13 PM</time>
                      <br />
            Last reviewed by:  
            <a href="/en-US/profiles/ethertank">ethertank</a>, 
            <time datetime="2012-08-19T20:59:13-07:00">Aug 19, 2012 8:59:13 PM</time>
                        </section>
    </section>
  </article>
  <form id="wiki-page-edit" class="editing" method="post" action="/en-US/docs/DOM/Document.querySelector$edit">
      <input type="hidden" name="form" id="form" value="rev" />
      <input type="hidden" name="content" id="content" value="" />
  </form>
      </div>
   </div>
    </section>

<section id="footbar">
<div class="wrap">
  <p>
  What do you think of the new MDN? Please <a href="/en-US/docs/Project:Feedback">share your feedback</a> with us. <a id="dev-mdc-link" href="https://lists.mozilla.org/listinfo/dev-mdc">Join our mailing list</a> to discuss ways to help create great documentation.  </p>
</div>
</section>
<footer id="site-info" class="footer" role="contentinfo">
<div class="wrap">
    <div id="legal">
      <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-tiny.png" alt="" width="42" height="48">
      <p id="copyright">&copy; 2005 - 2013 Mozilla Developer Network and individual contributors</p>
      <p>
      Content is available under <a href="/en-US/docs/Project:Copyrights">these licenses</a>      &bull; <a href="/en-US/docs/Project:About">About MDN</a>
      &bull; <a href="http://www.mozilla.org/en-US/privacy">Privacy Policy</a>
    </div>
          <form class="languages go" method="get" action="/en-US/docs">
      <label for="language">Other languages:</label>
      <select id="language" class="wiki-l10n" name="next" dir="ltr">
        <option value="/en-US/docs/DOM/Document.querySelector" selected>
          English (US)
        </option>
                  <option value="/ja/docs/DOM/Document.querySelector">
            日本語
          </option>          <option value="/pt-BR/docs/DOM/Document.querySelector">
            Português (do Brasil)
          </option>      </select>
      <noscript><button type="submit">Go</button></noscript>
    </form>
  </div>
</footer>hello world!";
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Regexp
str.match('world');
ready
indexOf
str.indexOf('world');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.