As I am working on a new release of the German Political Speeches Corpus, I looked for a way to make web pages lighter. I have lots of repetitive information, so that a little JavaScript is helpful when it comes to save on file size. Provided that the DOM structure is available, there are elements that may be completed on load.
For example, there are span elements which include specific text. By catching them and testing them against a regular expression the script is able to add attributes (like a class) to the right ones. Without activating JavaScript one still sees the contents of the page, and with it the page appears as I intended. In fact, the attributes match properties defined in a separate CSS file.
I had to look for several JavaScript commands across many websites, that’s why I decided to summarize what I found in a post.
First example : append text and a target to a link
These lines of code match all the links that don’t already have a href attribute, and append to them a modified destination as well as a target attribute.
function modLink(txt){
// Get all the links
var list = document.getElementsByTagName(“a”); for (var i = 0; i < list.length; i++) { // Check if they already have an href attribute if (!list[i].getAttribute(‘href’)) { // Get what’s in the a tag var content = list[i].firstChild.data; // Give the element a special href attribute list[i].href += “something/” + content + “.html” + “?var=” + txt; // Give the element a target attribute list[i].target= “_blank”; } } }
The result : one has to call this function somewhere in the HTML document (I do it on load) : modLink(test;). Then, an a tag including the text ‘AAA’ will become *a href=”something/AAA.html?var=test”*. Very useful if you have to pass arguments.
Second case : append a class to a span element
These lines of code modify existing span elements, those including parentheses and digits and the rest, by adding a class named c or i[digits] accordingly.
function modSpan() {
// Get all span elements
var spanlist = document.getElementsByTagName(“span”); for (var n = 0; n < spanlist.length; n++) { // Get their contents var inspan = spanlist[n].firstChild.data; // If there is a left parenthesis if (/(/.test(inspan)) { // Find the digits in the contents and add them to a class named i var num = /[0-9]+/.exec(inspan); var add = “i” + num; spanlist[n].setAttribute(‘class’, add); // Hack to make it work with old versions of Internet Explorer spanlist[n].setAttribute(‘className’, add); } // If there is no left parenthesis in the span, add a class named c else { spanlist[n].setAttribute(‘class’, ‘c’); spanlist[n].setAttribute(‘className’, ‘c’); } } }
The result : a span element containing text like ‘AAA’ will get a class=”c” attribute, whereas another containing something like ‘(505)’ will get class=”i505”.
A last word regarding the security and the functionality of this code : you might want to check the elements to change against fine-grained expressions (not like in this example) in order to ensure the result cannot be modified by mistake.