Mercury Parser

Example providing a page summary using Mercury Parser

HTML

<script src="https://unpkg.com/@postlight/mercury-parser@2.1.1/dist/mercury.web.js"></script>
<button class="summarize">
  Display Page Summary
</button>

<div class=\"floe\">
    <div class=\"row\">
        <div class=\"columns small-12 medium-9 large-9\">
            <header class=\"floe-header\">
                <h1><a rel=\"home\" title=\"Home\" href=\"index.html\" class=\"floe-header-logo\">floe
                    <span class=\"floe-header-tagline\">
                        flexible learning for open education
                    </span></a>
                </h1>
            </header>
        </div>
        <div class=\"columns small-12 medium-3 large-3 align-self-bottom\">
            <nav class=\"floe-nav\">
                <ul>
                    <li><a href=\"news/index.html\">News</a></li>
                    <li><a href=\"resources.html\">Resources</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <div id=\"content\" class=\"floe-content floe-story\">
        <div class=\"flc-toc-tocContainer toc\"> </div>

            <div class=\"row\">


                <div class=\"columns large-6 small-12\">

                    <h2>Designing for Diverse Learners.</h2>
                    <p>FLOE provides the resources to personalize how we each learn and to address barriers to learning.
                        Learners learn differently, and today’s society needs diverse, self-aware, life-long learners.
                        FLOE supports learners, educators and curriculum producers in achieving one-size-fits-one learning design
                        for the full diversity of learners, leveraging the variants made possible by
                        <a href=\"http://www.hewlett.org/programs/education/open-educational-resources\">Open Education Resources</a> (OER).</p>
                    <p>FLOE is led by the <a href=\"http://idrc.ocadu.ca\">Inclusive Design Research Centre</a>
                        and applies <a...

CSS

.summary {
  border: 1px solid #000000;
  padding: 0;
  list-style-type: none;
  padding: 1rem;
}

.key {
  text-transform: uppercase;
}

JavaScript

var displaySummary = function (result) {
  var summary = $("<ul class=\"summary\"></ul>");
  
  $.each(result, function (key, val) {
  	summary.append("<li><strong class=\"key\">" + key + ":</strong> " + val + " </li>");
  });
  
  $("body").prepend(summary);
};

$(".summarize").click(function () {
	Mercury.parse().then(displaySummary);
  $(".summarize").prop("disabled", true);
});