Profile Tricks

Javascript to make xsd:hexBinary easier to read

Bergi's proposal

requires jQuery

Bergi suggested the following to make the hexBinary easier to read. Place this in the html page. This will change the DOM in the browser but not on the server of course. Perhaps the datatype in the dom should also be changed, just in case?

$(document).ready(function() {
// replace me with RDFa selector when available
 $('*[property="modulus"].*[datatype="xsd:hexBinary"]').each(function(index, element) {
  var digitsPerLine = 16;
  var separator = ":";
  var textIn = $(element).text();
  var textOut = new String();

  for(var i=0; i<textIn.length; i+=2) {
   textOut = ((i%digitsPerLine)==0 && i!=0) ? textOut=textOut+"\n" : textOut;
   textOut = ((i%digitsPerLine)==0) ? textOut+textIn.substr(i, 2) : textOut+separator+textIn.substr(i,2);
  }

  $(element).text(textOut);
  });
}
 

Domel's proposal (without break lines)

Version without styles. To break line use:

word-wrap: break-word; 
white-space: pre-wrap;

JavaScript:

var sep = ":";
var sel = document.querySelectorAll("[datatype*='hexBinary'][property*='modulus']");
for (var i=0; i<sel.length; i++) {
  var modulus = sel.item(i).innerHTML
  var n, newmod = "";
  for(var j=0; j<modulus.length; j+=2) {
    n = modulus.substr(j, 2);
    newmod = (j<modulus.length-2) ? newmod + n + sep : newmod + n;
  }
  sel.item(i).innerHTML = newmod;
}

Comments:

• pure JavaScript (without JavaScript libraries)
• works with various prefixes and without prefixes (RDFa 1.0 and RDFa 1.1)
• runs on Firefox 3.5, IE 8+, Chrome 4.0+, Safari 3.2+ and Opera 11.0+

Domel's proposal (with break lines)

var sep = ":";
var sel = document.querySelectorAll("[datatype*='hexBinary'][property*='modulus']");
for (var i=0; i<sel.length; i++) {
  var modulus = sel.item(i).innerHTML
  var n, newmod = "";
  for(var j=0; j<modulus.length; j+=2) {
    n = modulus.substr(j, 2);
    newmod = (j<modulus.length-2) ? newmod + n + sep : newmod + n;
  }
  sel.item(i).style.wordWrap = "break-word"; 
  sel.item(i).style.whiteSpace = "pre-wrap";
  sel.item(i).innerHTML = newmod;
}

Comments:

• see above
• support break lines via CSS
• An example: XHTML+RDFa (extracted RDF/XML and Turtle)