make stylesheet specific to template only

by Michael Dibbets

HTML

<label>Prepend: </label><input id="prependname" value="template-"><BR/>
<BR/>
    <label>CSS</LABEL>
    <textarea  rows=20 cols=40  id="inputareacss"></textarea>
    <LABEL>HTML</LABEL>
    <textarea rows=20 cols=40 id="inputareahtml"></textarea><BR/>
    <input type="button" value="CONVERT" onclick="makeStylesheetSpecific(document.getElementById('inputareacss').value,document.getElementById('inputareahtml').value)"><BR/><BR/><BR/><BR/><BR/>
     
       CSS <textarea  rows=20 cols=40  id="outputcss">
        </textarea>
       HTML <textarea  rows=20 cols=40  id="outputhtml">
        </textarea>

JavaScript

function makeStylesheetSpecific(css,html) {
    var outputhtml = document.getElementById('outputhtml');
    var outputcss = document.getElementById('outputcss');
    var prepend = document.getElementById('prependname').value;
    var classes = getClasses(html);
    var ids = getIds(html);
    outputcss.value = getCSSIdentifiers(css,html,prepend);
    outputhtml.value = replaceClassesInHTML(html,prepend);
}
function replaceClassesInHTML(strsource,prepend) {
    var pieces = strsource.split('class="');
    pieces.shift();
    
    var outputstr = '';
    var classes = [];
    for(var c=0,len = pieces.length;c<len;c++) {
        var str = pieces[c].substr(0,pieces[c].indexOf('"'));
        var cls = prepend+ (str.split(' ').join(' '+prepend));
        strsource = strsource.split('class="'+str+'"').join('class="'+cls+'"');
        
    }
    return strsource;
}
function replaceIdsInHTML(strsource,prepend) {
    var pieces = strsource.split('id="');
    var ret ='';
    for(var c=0,len = pieces.length;c<len;c++) { 
        if(c==0) {
            ret += pieces[c];
            continue;
        }
        ret += 'id="' +prepend+pieces[c];
    }
    return ret;
}
function getIds(strsource) {
    var pieces = strsource.split('id="');
    pieces.shift();
    
    var outputstr = '';
    var ids = [];
    for(var c=0,len = pieces.length;c<len;c++) {
        var str = pieces[c].substr(0,pieces[c].indexOf('"'));
        var cls = str.split(' ');
        for(var i=0,ln = cls.length;i<ln;i++) {
            ids.push(cls[i]);
        }
    }
    return ids;
}
function getClasses(strsource) {
    var pieces = strsource.split('class="');
    pieces.shift();
    
    var outputstr = '';
    var classes = [];
    for(var c=0,len = pieces.length;c<len;c++) {
        var str = pieces[c].substr(0,pieces[c].indexOf('"'));
        var cls = str.split(' ');
        for(var i=0,ln = cls.length;i<ln;i++) {
            classes.push(cls[i]);
        }
    }
    return classes;
}
function...