This is my first ever userscript for Chrome. It renders BBCode directly on your browser, i.e. it performs a client-side rendering.
Some of you may find it useful to view the old style logs, while we wait for some solution to convert hundreds of logs or thousands of logs to the new style (I have myself more that 5000 logs containing some BBCode.)
Enjoy!
// ==UserScript==
// @name Geo-BBCode
// @match https://www.geocaching.com/seek/*
// @match https://www.geocaching.com/geocache/*
// @author geo-amd
// @version 1.0
// @version_name v1.0, Feb 5 2016
// @description Client-side rendering of BBCode for geocaching.com pages. Developed for Chrome.
// ==/UserScript==
// LIMITATIONS:
// 1: Not tolerant of small mistakes regarding the open and close order of the BBCode tags.
// 2: The number of supported tags is limited. Only these are available:
// url, b, i, center, size, red, orange, yellow, green, blue, purple, black.
// 3: Deals only with BBCode, not HTML.
// 4: Works well when viewing individual logs. However, in the context of a cache listing, only
// the first few logs in the listing are converted. This is because the listing is lazily
// loaded. If you know how to deal with this problem, please tell me or improve my solution.
// INSTALLATION (easy!):
// 1: Copy this script to a new text file named "Geo-BBCode.user.js".
// 2: Inside Chrome, use the URL chrome://extensions to bring the Extension page into view.
// 3: Drag the icon of the file "Geo-BBCode.user.js" and drop it in the Extensions page.
// 4: Confirm the installation go ahead in the dialog that appears.
// 5: That's all! No restart is necessary.
// TESTING:
// After installation, test the script using this log for example: http://coord.info/GLFG94FQ
function transform(str) {
str = str.replace(/\[url=([^\]]*)\]([\s\S]*?)\[\/url\]/igm,'<a href="$1">$2</a>');
str = str.replace(/\[b\]([\s\S]*?)\[\/b\]/igm, '<b>$1</b>');
str = str.replace(/\[i\]([\s\S]*?)\[\/i\]/igm, '<i>$1</i>');
str = str.replace(/\[center\]([\s\S]*?)\[\/center\]/igm, '<center>$1</center>');
str = str.replace(/\[size=([^\]]*)\]([\s\S]*?)\[\/size\]/igm, '<span style="font-size:1.7em">$2</span>');
str = str.replace(/\[red\]([\s\S]*?)\[\/red\]/igm, '<span style="color:red">$1</span>');
str = str.replace(/\[orange\]([\s\S]*?)\[\/orange\]/igm, '<span style="color:orange">$1</span>');
str = str.replace(/\[yellow\]([\s\S]*?)\[\/yellow\]/igm, '<span style="color:yellow">$1</span>');
str = str.replace(/\[green\]([\s\S]*?)\[\/green\]/igm, '<span style="color:green">$1</span>');
str = str.replace(/\[blue\]([\s\S]*?)\[\/blue\]/igm, '<span style="color:blue">$1</span>');
str = str.replace(/\[purple\]([\s\S]*?)\[\/purple\]/igm, '<span style="color:purple">$1</span>');
str = str.replace(/\[black\]([\s\S]*?)\[\/black\]/igm, '<span style="color:black">$1</span>');
return str;
};
function process(elems) {
for( i = 0; i < elems.length; i++ ) {
var e = elems[i];
if( e.className == "LogText" || e.id == "ctl00_ContentBody_LogBookPanel1_LogText" )
e.innerHTML = transform(e.innerHTML);
}
};
process(document.getElementsByTagName('span'));
// End of script
