regexp vs indexOf (v60)

Revision 60 of this benchmark created on

Preparation HTML

<script>
  var str = new Regexp(' <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>').replace(/\t\n\r/, 'fdsafghtyjm5') + "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.