JavaScript:parsing HTML and re-presenting it

With this useful site as my test source, I wanted to grab a bunch of composers and present them in a different way. To avoid Cross-Domain issues, I had to a) get a simple web server running (see previous post), and b) import the html. I am something of a novice at HTML and JavaScript. So while being sure there is a better way, right now, I just needed to get it done. I left the original HTML as-is (I realise now that although I changed the class names to ComposerSet… I didn’t need to – the classes already had a name, so I could have used those).

The “site” consists of index.html which just references the workhorse Composers.html, and ComposerApp.js. The latter consists of an IIFE and does the work of a) parsing the original HTML, b) getting into an array of objects, c) writing it back out to HTML.

index.html first…



<!DOCTYPE html>
<html lang="en" ng-app="">

 <meta charset="UTF-8">
 <script src=""> </script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src=""></script>
 <link rel="stylesheet" href="">
 <script src=""></script>
 <link rel="import" href="Composers.html">
 <script src="ComposerApp.js"></script>


 <h1>Try this</h1>


 <ul class="ComposerSet">
 <li>JANITSCH, Johann Gottlieb (6/19/1708-1763)</li>
 <ul class="ComposerSet">
 <li>AGUILERA DE HEREDIA, Sebastian (1565-1627)</li>
 <li>ALBENIZ, Isaac (5/29/1860-5/18/1909)</li>
 <li>ALBENIZ, Mateo Antonio Perez (1760-1831)</li>
 <li>ALBERTO, Lluys ANDREU, Francesc ARRIAGA, Juan Crisostomo Jacobo Antonio de (1/27/1806-1/17/1826)</li>
 <li>BAGUER, Carlos (1768-1808)</li>
 <li>BERNABE (?-1617)</li>
 <li>BRUNA, Pablo (6/22/1611-6/27/1679)</li>
 <li>CABANILLES, Juan Bautista Jose (9/4/1644-4/29/1712)</li>
 <li>CABEZON, Antonio de (1510-3/26/1566)</li>
 <li>CABEZON, Hernando de (9/7/1541-10/1/1602)</li>
 <li>CORREA DE ARAUXO, Francisco (1576-10/31/1654)</li>
 <li>DURON, Sebastian (4/19/1660-8/3/1716)</li>
 <li>FALLA, Manuel De (11/23/1876-11/14/1946)</li>
 <li>GRANADOS, Enrique (7/27/1867-3/24/1916)</li>
 <li>HALFFTER, Ernesto (1/16/1905-1989)</li>
 <li>NASSARRE, Pablo (1654-1730)</li>
 <li>RODRIGO, Joaquín (11/22/1901- )</li>
 <li>SARASATE, Pablo Martin Meliton de (3/10/1844-9/20/1908)</li>
 <li>SEGOVIA, Andres (2/21/1893-6/2/1987)</li>
 <li>SELMA, Bartolme de (1570-1638)</li>
 <li>SOLER, Padre Antonio Francisco Javier Jose (12/3/1729-12/20/1783)</li>
 <li>SOR, Fernando (2/13/1778-7/10/1839)</li>
 <li>SOTO DE LANGA, Francesco (1534-9/25/1619)</li>
 <li>TURINA, Joaquín (12/9/1882-1/14/1949)</li>
 <li>VILA, Francisco</li>

<br data-mce-bogus="1">

'use strict';
// entry point...
(function () {
var link;
var content;
var composers = [];


//var composerSet = content.getElementById("ComposerSet1").innerHTML;
var composerSetCount = content.getElementsByClassName("ComposerSet").length;

for (var index = 0; index < composerSetCount; index++) {

var composerSet = content.getElementsByClassName("ComposerSet")[index].innerHTML;
var composersAsElements = htmlToElements(composerSet);

for (let composerAsElements of composersAsElements) {
convertComposerTextToObject(composerAsElements, composers);

composers.sort(function(a,b) {return (a.lastName > b.lastName) ? 1 :
((b.lastName > a.lastName) ? -1 : 0);});

for (let comp of composers) {
<h1>" + comp.lastName + "</h1>
<h4>" + comp.firstNames + " " + comp.lastName + " " +
comp.dateOfBirth + " " + comp.dateOfDeath + "</h4>

// functions...
function htmlToElements(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.childNodes;

function convertComposerTextToObject(composer, composersx) {
var composerText = composer.innerText;
if (composerText === undefined) {
// Treat the characters , and ( and - and ) as delimiters for splitting the string into tokens.
// An example of a string to be split:
// THOMPSON, Randall (4/21/1899-7/9/1984)
var separators = [',', '(', '\\-', ')']
var composerParts = composerText.split(new RegExp('[' + separators.join('') + ']', 'g'));

var theComposer = {};
theComposer.lastName = composerParts[0];
theComposer.firstNames = composerParts[1];
theComposer.dateOfBirth = composerParts[2];
theComposer.dateOfDeath = composerParts[3];



function importComposers() {
link = document.querySelector('link[rel="import"]');
content = link.import;





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s