Enjoy,
Elegie.
--- test.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>The Story of the Blessing of El-ahrairah</title>
<style type="text/css">
* {
font-family : trebuchet MS, sans-serif ;
}
h1 {
color : #c00 ;
font-weight : 700 ;
font-size : 1.2em ;
}
p {
background-color : #ff9 ;
color : #000 ;
padding : 5px ;
width : 70% ;
}
</style>
<script type="text/javascript">
// When the page is loaded, load the glossary.html page in
// a dynamically created iframe (used as data buffer);
// the glossary page will constitute a glossary object from
// the glossary table, then call its glossarize method,
// which will modify our content here.
window.onload = function (evt) {
// Execute the script if supported
if(
document.createElement &&
document.appendChild &&
document.body
){ // load the glossary, and apply to paragraphs
var iframe = document.createElement("iframe") ;
iframe.style.display = "none" ;
document.body.appendChild(iframe) ;
iframe.src = "glossary.html" ;
}
}
</script>
</head>
<body>
<h1>The Story of the Blessing of El-ahrairah</h1>
<div><i>Richard Adams, Watership Down, Chapter 6.</i></div>
<p>
"Now, El-ahrairah was among the animals in those days and he had many
wives. He had so many wives that there was no counting them, and the
wives had so many young that even Frith could not count them, and
they ate the grass and the dandelions and the lettuces and the
clover, and El-ahrairah was the father of them all." (Bigwig growled
appreciatively.) "And after a time," went on Dandelion, "after a time
the grass began to grow thin and the rabbits wandered everywhere,
multiplying and eating as they went."
</p>
</body>
</html>
---
--- glossary.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Glossary</title>
<style type="text/css">
* {
font-family : trebuchet MS, sans-serif ;
}
h1 {
color : #c00 ;
font-weight : 700 ;
font-size : 1.2em ;
}
th {
background-color : #fc3 ;
color : #c00 ;
font-weight : 700 ;
}
td {
background-color : #ff9 ;
color : #000 ;
padding : 5px ;
}
</style>
<script type="text/javascript">
// This page can be accessed either directly, or from a frame.
// If it is called directly, we modify the current page; otherwise,
// we modify the top page.
window.onload = function (evt) {
// Execute the script if supported
if(
document.getElementsByTagName &&
document.body &&
typeof document.body.innerHTML != "undefined" &&
typeof document.childNodes != "undefined"
){
// build a glossary object from the table
var glossary = {} ;
// grasp all A elements, check if they are anchors,
// grab their content (new glossary key), and
// grab their name (corresponding glossary href)
var entries = document.getElementsByTagName("a") ;
for( var ii=0; ii<entries.length; ii++) {
if (!entries[ii].href) {
glossary[
(
entries[ii].textContent ||
entries[ii].innerText||
""
).toLowerCase()
] = location.href.replace(/\#[a-z0-9-]+$/i,"") +
"#" + entries[ii].name ;
}
}
glossarize(glossary, top!=this ? top.document : document) ;
}
}
// We intend to replace the innerHTML property of all paragraphs,
// so we need to precisely identify where the glossary
// entries are located, more specifically searching in text nodes
// only, disregarding other locations reported by innerHTML, such as
// elements attributes or attributes' values.
function glossarize(glossary, owner) {
// Get all paragraphs
var p = owner.getElementsByTagName("p") ;
// For all paragraphs
for (var ii=0; ii<p.length; ii++) {
// Normalize the text nodes we will search later
if (p[ii].normalize) {
p[ii].normalize() ;
}
// Find and mark all glossary entries in text nodes,
// using a special token : \x01
// (we could also create a unique token, with additional
// code, but the one here should be rare enough)
for (var j=0; j<p[ii].childNodes.length; j++) {
var child=p[ii].childNodes[j] ;
if(child.nodeType == 3) { // TEXT_NODE
for (var entry in glossary) {
// Mark the entry, using the special token
child.nodeValue =
child.nodeValue.replace(
new RegExp(
"\\b("+entry+")\\b",
"gi"
),
function (a, b) {
return "\x01"+b+"\x01"
}
) ;
}
}
}
// Replace the mark entries by appropriate links
p[ii].innerHTML = p[ii].innerHTML.replace(
/\x01([a-z0-9\-]+)\x01/ig,
function (a, b) {
return "<a href='"+glossary[b.toLowerCase()]+"'>"+b+"<\/a>" ;
}
) ;
}
}
</script>
</head>
<body>
<h1>Glossary</h1>
<table>
<thead>
<tr><th>Entry</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td><a name="frith">Frith</a></td>
<td><p>The god that made the world.</p></td>
</tr>
<tr>
<td><a name="elahrairah">El-ahrairah</a></td>
<td><p>The legendary rabbit, who was tricked by Frith.</p></td>
</tr>
<tr>
<td><a name="bigwig">Bigwig</a></td>
<td><p>A tough rabbit, who admires El-ahrairah.</p></td>
</tr>
<tr>
<td><a name="dandelion">Dandelion</a></td>
<td><p>A story-teller rabbit.</p></td>
</tr>
</tbody>
</table>
</body>
</html>
---
