Introducing BibleUp: A Web Tool For Bible References

BibleUp transforms Bible references on a web page into accessible popovers

Playground | Demo | Github

Table of contents

1. What is BibleUp
2. How it works
3. Code Playground
4. Features
5. What's next
6. Conclusion

What is BibleUp

If you have ever read a christian or biblical article online, then you would, most likely, have encountered plain Bible references conventionally written in brackets (Matthew 1:21)

These references are not in any way linked to their corresponding text except they are otherwise written out by the author.

BibleUp was created as a solution to this.

See the live demo here

BibleUp is a configurable Web tool that transforms plain Bible references on a webpage to hyperlinks (<a>).

When these links are moused on or clicked, the Bible text becomes accessible via a flexible and highly customizable popover.

How it works

BibleUp searches through all text nodes in the DOM, moving from one element to the next and transforming all valid references to links. The popover which houses the text is constructed based on the config options and appended to document.body.

Under the hood, BibleUp uses an internal API to fetch the Bible text and they are cached so subsequent requests are delivered fast.

Special thanks to api.bible

How references are matched

All valid references pass through a two-step validation process.

The first is a regex test. This is possible since all references have a common structure (book chapter:verse-verseEnd).

// variable 'books' are all 66 books separated by '|'let regex = `(?:(?:(${books})\\.?\\s?(\\d{1,3}))(?:(?=\\:)\\:\\s?(\\d{1,3}(?:\\s?\\-\\s?\\d{1,3})?)|))|(?<=(?:(${books})\\.?\\s?(\\d{1,3}))\\:\\s?\\d{1,3}(?:\\s?\\-\\s?\\d{1,3})?(?:\\,|\\&)\\s?(?:\\d{1,3}(?:\\,|\\&)\\s?|\\d{1,3}\\s?\\-\\s?\\d{1,3}(?:\\,|\\&))*)(\\d{1,3}(?!\\s?\\-\\s?)|\\d{1,3}\\s?\\-\\s?\\d{1,3})`;let bible_regex = new RegExp(regex, 'g');bible_regex.test('John 3:16') //returns true

However, string that aren't valid references like John 53:112 may match and this is why the next stage of verification involves the use of an object that stores the number of chapters and verses in each book of the Bible.

/* variable 'bibleData' is an array of objects containing all 66 books* the total number of verses in a chapter is listed in the 'chapters:[]' array*/const bible = { book: 'John', chapter: 3, verse: 16}for (const data of bibleData) {   if (data.book == bible.book) {      if (bible.chapter <= data.chapters.length &&         data.chapters[bible.chapter - 1] != undefined &&         bible.verse <= data.chapters[bible.chapter - 1]) {         if (bible.verseEnd == undefined) {            return JSON.stringify(bible)         } else if (bible.verseEnd <= data.chapters[bible.chapter - 1]) {            return JSON.stringify(bible)         } else {            return false         }      } else {         return false      }   }}

These examples only show part of the codes where the match is done. Check the full code on Github.

You can test the regex here on regExr

BibleUp is written in vanilla JavaScript with zero dependency and LESS CSS for styling. The last two versions of all modern browsers are supported

Code Playground

Features

There are quite a few awesome tools like BibleUp. One of these is FaithLife Reftagger.

These tools are great in their core functions and they integrate well.

BibleUp however leverages on community development, flexibility and high customisation options.

BibleUp can be styled thoroughly to fit perfectly with any website or theme.

What's next

This tool is currently in final beta, so there is much more to come.

Top of what's coming next is making more versions available (daunting permission/copyright process but very possible).

Other are integration with WordPress (a plugin) and other environments (browser extensions) and more functionality like 'read aloud' and share buttons.

Conclusion

BibleUp is open to contributions and feature requests.

Check out the source code on Github and help contribute or kindly drop a review

Visit the website or check the docs for more information.

Thank you!