Better jQuery Embed Code validation (user input via textarea) - javascript

I'm working on a site where users can paste in embed codes from the likes of twitter, youtube, instagram, facebook, etc. The Embed code is validated and saved if valid.
The users can then see and edit the code and this is where some code fails validation. E.g. Twitter embed codes may contain < (aka '<') in the post name/text. When pasting in the code originally it passes validation as it contains <, but when displaying the code back to the user the browser shows < in the textarea and this is then submitted if the user clicks save. Our validation function treats this as the start of a tag and the validation fails.
Possible solution 1:
Better validation. The validation we use now looks like this It basically finds the tags (by looking for '<' etc) and checks that each open tag has a closing tag. There must be a better/standard/commonly used way:
(function($) {
$.validateEmbedCode = function(code) {
//validating
var input = code;
var tags = [];
$.each(input.split('\n'), function (i, line) {
$.each(line.match(/<[^>]*[^/]>/g) || [], function (j, tag) {
var matches = tag.match(/<\/?([a-z0-9]+)/i);
if (matches) {
tags.push({tag: tag, name: matches[1], line: i+1, closing: tag[1] == '/'});
}
});
});
if (tags.length == 0) {
return true;
}
var openTags = [];
var error = false;
var indent = 0;
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
if (tag.closing) {
// This tag is a closing tag. Decide what to do accordingly.
var closingTag = tag;
if (isSelfClosingTag(closingTag.name)) {
continue;
}
if (openTags.length == 0) {
return false;
}
var openTag = openTags[openTags.length - 1];
if (closingTag.name != openTag.name) {
return false;
} else {
openTags.pop();
}
} else {
var openTag = tag;
if (isSelfClosingTag(openTag.name)) {
continue;
}
openTags.push(openTag);
}
}
if (openTags.length > 0) {
var openTag = openTags[openTags.length - 1];
return false;
}
return true
};
}
Possible solution 2:
Encode the text containing '<' (i.e. textLine.replace(/</g, '<')) without encoding tags like <blockquote class="...>.
I've been experimenting with something like:
$(widget.find("textarea[name='code']").val()).find('*')
.each(function(){
// validate $(this).text() here. Need to get text only line by
// line as some elements look like <p>some text <a ...>text
// </a>more text etc</p>
});
Possible solution 3:
Display < as < and not < in the browser/textarea. We use icanhaz for templating (much like moustache).
Using date.code = '<' with <textarea name="code">{{{code}}}</textarea> in the template does not work, neither does {{code}}.

So I played some more and the following works, but I am still interested in suggestions for better embed code validation or better answers.
After the edit form (inc textarea) code is created using the icanhaz template (i.e. after widget = ich.editEmbedWidgetTemplate(encoded_data);) I do the following to encode instances of < etc into < etc. ' has to be encoded manually using replace.
var embedCode = '';
$( widget.find("textarea[name='code']").val() )
.filter('*')
.each(function(){
embedCode += this.outerHTML.replace(/'/g, ''');
});
widget.find("textarea[name='code']").val(embedCode);

Related

ui-metrics from javascript file

I am trying to build my own Twitter Bot, but I'm stuck at the point where it needs to press a button to continue to the next page. My Page is twitter.com/account/access and when the account is locked it will show javascript on account/access?js=1
with this JS I can obtain the ui_metrics which I need for the next payload. My problem is that I obtain an incorrect UI metrics. The code on account/access?js=1 looks like:
var fioDNpGxgmnkgCviIszx = function() {
$('.Button').prop('disabled', false);function CzHMSLRaxHitXCjrMvSI() {var aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=228;var a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=234;var a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=9;var a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=161;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=~(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4&aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428^a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=~a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(XSlSY,HCUYy,sLRiq){function ABGhk(lYBbi){this.rbMeE=function(){return this.mQFmd^lYBbi;}};var JutGW={mQFmd:sLRiq};var kVGSg=new ABGhk(XSlSY);kVGSg.mQFmd=HCUYy;ABGhk.prototype=JutGW;return kVGSg.rbMeE()|(new ABGhk(HCUYy)).rbMeE();}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428);a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=~(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8);a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=function(lHUyQ,vsVJI,HSoJI){var FtMNB=document.createElement('div');FtMNB.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(FtMNB);function RTiPq(xwdds,nrUno){for(var i=0;i<8;i++){var HyJWh=document.createElement('div');xwdds.appendChild(HyJWh);HyJWh.innerText=nrUno;if((nrUno&1)==0)xwdds=HyJWh;nrUno=nrUno>>1;}return xwdds;};function UWDtX(HyJWh,FtMNB,nrUno){if(!HyJWh||HyJWh==FtMNB) return nrUno%256;while(HyJWh.children.length>0)HyJWh.removeChild(HyJWh.lastElementChild);return UWDtX(HyJWh.parentNode,FtMNB,nrUno+parseInt(HyJWh.innerText));};var nrUno=UWDtX(RTiPq(RTiPq(RTiPq(FtMNB,lHUyQ),vsVJI),HSoJI),FtMNB,0);FtMNB.parentNode.removeChild(FtMNB);return nrUno;}(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(SNUeY,wyMcY,jnUNa){var hPVCO=document.createElement('div');hPVCO.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(hPVCO);function jpszb(dsoIa,gVlrY){for(var i=0;i<8;i++){var kAZuz=document.createElement('div');dsoIa.appendChild(kAZuz);kAZuz.innerText=gVlrY;if((gVlrY&1)==0)dsoIa=kAZuz;gVlrY=gVlrY>>1;}return dsoIa;};function YvUDO(kAZuz,hPVCO,gVlrY){if(!kAZuz||kAZuz==hPVCO) return gVlrY%256;while(kAZuz.children.length>0)kAZuz.removeChild(kAZuz.lastElementChild);return YvUDO(kAZuz.parentNode,hPVCO,gVlrY+parseInt(kAZuz.innerText));};var gVlrY=YvUDO(jpszb(jpszb(jpszb(hPVCO,SNUeY),wyMcY),jnUNa),hPVCO,0);hPVCO.parentNode.removeChild(hPVCO);return gVlrY;}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8);a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=~(a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8&a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=~(a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428&aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=function(VtQxq,JDmbe,HodKX){var opBXC=document.createElement('div');opBXC.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(opBXC);function kGiOS(bmzQA,vkEop){for(var i=0;i<8;i++){var XdtAo=document.createElement('div');bmzQA.appendChild(XdtAo);XdtAo.innerText=vkEop;if((vkEop&1)==0)bmzQA=XdtAo;vkEop=vkEop>>1;}return bmzQA;};function wTYEk(XdtAo,opBXC,vkEop){if(!XdtAo||XdtAo==opBXC) return vkEop%256;while(XdtAo.children.length>0)XdtAo.removeChild(XdtAo.lastElementChild);return wTYEk(XdtAo.parentNode,opBXC,vkEop+parseInt(XdtAo.innerText));};var vkEop=wTYEk(kGiOS(kGiOS(kGiOS(opBXC,VtQxq),JDmbe),HodKX),opBXC,0);opBXC.parentNode.removeChild(opBXC);return vkEop;}(a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4^a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(JGvCJ,CZNEA,ajWfe){var Znwrh=document.createElement('div');Znwrh.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(Znwrh);function WcTis(SzYNI,TwoYh){for(var i=0;i<8;i++){var LQHaS=document.createElement('div');SzYNI.appendChild(LQHaS);LQHaS.innerText=TwoYh;if((TwoYh&1)==0)SzYNI=LQHaS;TwoYh=TwoYh>>1;}return SzYNI;};function Vukgq(LQHaS,Znwrh,TwoYh){if(!LQHaS||LQHaS==Znwrh) return TwoYh%256;while(LQHaS.children.length>0)LQHaS.removeChild(LQHaS.lastElementChild);return Vukgq(LQHaS.parentNode,Znwrh,TwoYh+parseInt(LQHaS.innerText));};var TwoYh=Vukgq(WcTis(WcTis(WcTis(Znwrh,JGvCJ),CZNEA),ajWfe),Znwrh,0);Znwrh.parentNode.removeChild(Znwrh);return TwoYh;}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=~(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4&aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428|aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29|a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428|a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29^new Date(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29*10000000000).getUTCDate();aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4^a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8^new Date(a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8*10000000000).getUTCDate();a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=~(a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428&a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=~a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29^a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=function(nEzec,EegJb,rTBen){function ARFVQ(esSLG){this.KVEMV=function(){return this.KkIOD^esSLG;}};var Xopnv={KkIOD:rTBen};var bpsMS=new ARFVQ(nEzec);bpsMS.KkIOD=EegJb;ARFVQ.prototype=Xopnv;return bpsMS.KVEMV()|(new ARFVQ(EegJb)).KVEMV();}(aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4);a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=~(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8);aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4=aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4|aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4;a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29=function(xZcWJ,PMxhH,qtcNS){var fkXcC=document.createElement('div');fkXcC.setAttribute('style','display:none;');document.getElementsByTagName('body')[0].appendChild(fkXcC);function KHNOb(OtqjX,AMEcs){for(var i=0;i<8;i++){var ncNlf=document.createElement('div');OtqjX.appendChild(ncNlf);ncNlf.innerText=AMEcs;if((AMEcs&1)==0)OtqjX=ncNlf;AMEcs=AMEcs>>1;}return OtqjX;};function MseEH(ncNlf,fkXcC,AMEcs){if(!ncNlf||ncNlf==fkXcC) return AMEcs%256;while(ncNlf.children.length>0)ncNlf.removeChild(ncNlf.lastElementChild);return MseEH(ncNlf.parentNode,fkXcC,AMEcs+parseInt(ncNlf.innerText));};var AMEcs=MseEH(KHNOb(KHNOb(KHNOb(fkXcC,xZcWJ),PMxhH),qtcNS),fkXcC,0);fkXcC.parentNode.removeChild(fkXcC);return AMEcs;}(a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428,a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29);a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428&a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8;a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428=a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428|a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428;a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8=a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8&a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29;return {'rf':{'aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4':aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4,'a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29':a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29,'a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8':a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8,'a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428':a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428},'s':'6rrNTyjkfhoyl3rg2FDTf66srNDiG4KC9a2WZxPhIuYibvxvbr9Ol3yvc_ZwJUEeRVYs_gdMA_wM1tWYenL1FxUF2ssilmw9D78EndVw6p8TWep5o9Yf53DZPG4-2l9yE-fvtPZ4er88FC2-8A65GgxuHtwt7b5M0E8_VjW882MzGUUgxWpJ4hUR7SAZs6vsXyriHQxSmQ6rPo3R1oCRBcRK1qSW9uxQYnex5ks-sXskXKyRsFnRLzpp0Jl5PTTsixiGDl0gI7mkMY38IAVTq_5U21QPuqG6hhFto5x-oA0SMV3y0M6tR0pseWolht3SOTL0u20xLA_MWoqd_XsVQgAAAYMOoR5n'};};
var zczpQtGKyj;
try {
zczpQtGKyj = JSON.stringify(CzHMSLRaxHitXCjrMvSI());
} catch (e) {
zczpQtGKyj = "exception " + e;
}
var inputs;
inputs = document.getElementsByName('ui_metrics');
for (var i = 0; i < inputs.length; i++) { inputs[i].value = zczpQtGKyj; }
}
var tiIKkHESFDEdobreOyeY = function() {
document.removeEventListener('DOMContentLoaded', tiIKkHESFDEdobreOyeY);
window.removeEventListener('load', tiIKkHESFDEdobreOyeY);
window.setTimeout(fioDNpGxgmnkgCviIszx);
}
if (document.readyState === 'complete') {
window.setTimeout(fioDNpGxgmnkgCviIszx);
} else {
document.addEventListener('DOMContentLoaded', tiIKkHESFDEdobreOyeY);
window.addEventListener('load', tiIKkHESFDEdobreOyeY);
}
};
yvOyxmAwGvnIARXVXhAk();
And the UI-Metrics look like this:
{"rf":{"aeb56204b7dfbb714b9f12941a38203fa093e8efdba351010742b86e6a3bd7c4":127,"a749666c3c90c3b92db8140aaf4bf3fdcaaaa9757e148533e0905da43f71fb29":-18,"a0142c051d9b8b9e324e86454560d9578058db0b686d12ac8c99685f9960c9a8":-60,"a67adf5c8e0cc5e48af38fcce933d4ea423490465329dc5804658da386048428":-48},"s":"6rrNTyjkfhoyl3rg2FDTf66srNDiG4KC9a2WZxPhIuYibvxvbr9Ol3yvc_ZwJUEeRVYs_gdMA_wM1tWYenL1FxUF2ssilmw9D78EndVw6p8TWep5o9Yf53DZPG4-2l9yE-fvtPZ4er88FC2-8A65GgxuHtwt7b5M0E8_VjW882MzGUUgxWpJ4hUR7SAZs6vsXyriHQxSmQ6rPo3R1oCRBcRK1qSW9uxQYnex5ks-sXskXKyRsFnRLzpp0Jl5PTTsixiGDl0gI7mkMY38IAVTq_5U21QPuqG6hhFto5x-oA0SMV3y0M6tR0pseWolht3SOTL0u20xLA_MWoqd_XsVQgAAAYMOoR5n"}
I made it obtain the text on the account/access?js=1 site and save it to a text file, where I made a function in python that obtains the "ui_metrics"
My code:
ui_metrics = ui_metrics_code.split(f'var {split_ui_metrics};')[0].split('return ')[-1].replace(';','').replace('\n','').split(" ")[0].replace("}}","}")
(where ui_metrics_code is the response text as above)
which returns in:
{'rf':{'d1a4aa70239ad88006075fef748959edb5e520a120c6c2c81d01ab5a85d6d40f':d1a4aa70239ad88006075fef748959edb5e520a120c6c2c81d01ab5a85d6d40f,'adcfa4d4340cd3b32e2d310686e79a56f2825b7eb6c6ce96b322f24423f0847d':adcfa4d4340cd3b32e2d310686e79a56f2825b7eb6c6ce96b322f24423f0847d,'baa9e1c07813efeff769ef29f5ce6864b07dad1bd2c2a472f95e1a9757e5c14c':baa9e1c07813efeff769ef29f5ce6864b07dad1bd2c2a472f95e1a9757e5c14c,'aa71801b588167a6a0e578c9043ce76001f2a66c2543b83081770643da54c04e':aa71801b588167a6a0e578c9043ce76001f2a66c2543b83081770643da54c04e},'s':'au5l9uA05MtyeXy05-64Mca8JuHi-uX7Zj-AhiRRySJa-4oPF-lvFyUSLE7RK8LnZ1w4KjQ-Nnko_cO7_s01h8VorlZcjqDczGw54WZ5UXVPdrHuuM9jmWKwJKZLF-c-GM96fPGPx0jr-S5GatOXfD_awkPI61HDeblfOKGZxqPQkQpTvGpAbcuur2QZr7MRzx5UMgmaZZDYjRqqPgDwWZADV-XBD9csj6lCsdirfNFvkHPQU4SmXwNHn2hZaN-ntfrMIpajcxhBCsX-S2HZpb9F4D6F16JtvVX9giQbm10KRuX3sGCxCy6x02n6p-eIj3f3lvmQxo1Bl23S1A2LZAAAAYMO9BRe'}
as you can see I miss the numbers like :127 and :-18 after the variables.
Im trying to understand where these numbers come from and how I can obtain these so I can get a correct UI-Metrics. Im pretty new in all this so im still trying to understand. Help would be really appreciated!

Change liferay-ui:input-localized XML with javascript

I have the following tag in my view.jsp:
<liferay-ui:input-localized id="message" name="message" xml="" />
And I know that I can set a XML and have a default value on my input localized. My problem is that I want to change this attribute with javascript. I am listening for some changes and call the function "update()" to update my information:
function update(index) {
var localizedInput= document.getElementById('message');
localizedInput.value = 'myXMLString';
}
Changing the value is only updating the currently selected language input (with the whole XML String). The XML String is correct, but I am not sure on how to update the XML for the input with javascript.
Is this possible?
PS: I have posted this in the Liferay Dev forum to try and reach more people.
After a week of studying the case and some tests, I think that I found a workaround for this. Not sure if this is the correct approach, but it is working for me so I will post my current solution for future reference.
After inspecting the HTML, I noticed that the Liferay-UI:input-localized tag creates an input tag by default, and then one more input tag for each language, each time you select a new language. Knowing that I created some functions with Javascript to help me update the inputs created from my liferay-ui:input-localized. Here is the relevant code:
function updateAnnouncementInformation(index) {
var announcement = announcements[index];
// the announcement['message'] is a XML String
updateInputLocalized('message', announcement['message']);
}
function updateInputLocalized(input, message) {
var inputId = '<portlet:namespace/>' + input;
var xml = $.parseXML(message);
var inputCurrent = document.getElementById(inputId);
var selectedLanguage = getSelectedLanguage(inputId);
var inputPT = document.getElementById(inputId + '_pt_PT');
inputPT.value = $(xml).find("Title[language-id='pt_PT']").text();
var inputEN = document.getElementById(inputId + '_en_US');
if (inputEN !== null) inputEN.value = $(xml).find("Title[language-id='en_US']").text();
else waitForElement(inputId + '_en_US', inputCurrent, inputId, xml);
var inputLabel = getInputLabel(inputId);
if (selectedLanguage == 'pt-PT') inputLabel.innerHTML = '';
else inputLabel.innerHTML = inputPT.value;
if (selectedLanguage == 'pt-PT') inputCurrent.value = inputPT.value;
else if (inputEN !== null) inputCurrent.value = inputEN.value;
else waitForElement(inputId + '_en_US', inputCurrent, inputId, xml);
}
function getSelectedLanguage(inputId) {
var languageContainer = document.getElementById('<portlet:namespace/>' + inputId + 'Menu');
return languageContainer.getElementsByClassName('btn-section')[0].innerHTML;
}
function getInputLabel(inputId) {
var boundingBoxContainer = document.getElementById(inputId + 'BoundingBox').parentElement;
return boundingBoxContainer.getElementsByClassName('form-text')[0];
}
function waitForElement(elementId, inputCurrent, inputId, xml) {
window.setTimeout(function() {
var element = document.getElementById(elementId);
if (element) elementCreated(element, inputCurrent, inputId, xml);
else waitForElement(elementId, inputCurrent, inputId, xml);
}, 500);
}
function elementCreated(inputEN, inputCurrent, inputId, xml) {
inputEN.value = $(xml).find("Title[language-id='en_US']").text();
var selectedLanguage = getSelectedLanguage(inputId);
if (selectedLanguage == 'en-US') inputCurrent.value = inputEN.value;
}
With this I am able to update the liferay-ui:input-localized inputs according to a pre-built XML String. I hope that someone finds this useful and if you have anything to add, please let me know!
To change the text value of an element, you must change the value of the elements's text node.
Example -
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue = "new content"
Suppose "books.xml" is loaded into xmlDoc
Get the first child node of the element
Change the node value to "new content"

Special Characters Validation Not Working as expected

I'm trying to apply Regular Expression Validation to a textbox User Control and it's only working when I enter something at the end of the text in the textbox. And when I type something somewhere in the middle of the text, it's not working.
For Example: Hey Man! (When I type '!' at the end of the text, my Code's working fine)
Hey! Man! (But when I insert '!' somewhere in the middle of the text after the entire text is typed, not working)
Below is my Code:
$("textarea[id$=<%= TxtValue.ClientID %>]").keyup(function () {
var txt = $(this).val();
var regex = new RegExp('[^0-9a-zA-Z-,_.\:\s]+$');
var vldttxt = regex.test(txt);
if (txt.length > 0 && vldttxt === true) {
alert("Error");
}
var noSpclChar = txt.replace(regex, "");
this.value = noSpclChar;
});
Any help would be greatly appreciated! Thanks!
This should work. Your ending $ is what is keeping it from matching anything within the string:
$("textarea[id$=<%= TxtValue.ClientID %>]").keyup(function () {
var txt = $(this).val();
var regex = new RegExp('[^0-9a-zA-Z-,_.\:\s]+');
var vldttxt = regex.test(txt);
if (txt.length > 0 && vldttxt === true) {
alert("Error");
}
var noSpclChar = txt.replace(regex, "");
this.value = noSpclChar;
});
> Most simple code ....Special Characters Validation
function checkForm(theForm) {
var result = /^[a-z0-9\\.;,:'\\s]{1,100}$/i(theForm.data.value);
if (!result) {
alert("No legal characters entered");
}
return !!result;
}

How to inject a number into HTML from a list?

What is the most convenient way of injecting a number into the HTML of the site (using Chrome Extensions), when the given parameter is found in the website's code? For example we have a list:
www.newsweek.com, hf-title, 2
www.aaa.com, yzs, 1
www.ccc.com, abc, 123
When we find "hf-title" on the website www.newseek.com then number "2" is inserted next to the found paragraph on the website in the browser. When we find "abc" in the code of the website www.ccc.com then number "123" is inserted next to the table, and so on.
There cannot be any connection to the database, just javascript.
The list that is going to be used will be hundreds of rows long, so it is really problematic to use switch statement.
The source table has to be located in the Google Chrome extension files on the PC. The information should be looked for when (or shortly after) the site is being opened.
Example of the source code:
<h2 class="hf-title">
Four NATO Allies Deny Ukraine<span class="overlay article-overlay"></span>
</h2>
<div class="hf-summary">
NATO officials have previously said... </div>
</div>
We add simply
<a> 2 </a>
at the end.
Any ideas? ;)
What you will likely need to do is find all of the text nodes on the page. From there you can begin editing them. The 'modifyTextNodes' function is an example of using a TreeWalker to do this. It is a very efficient method for traversing the DOM.
var arr = [{url:"www.newsweek.com", string:"hf-title", value:"2"},
{url:"www.aaa.com", string:"yzs", value:"1"},
{url:"www.ccc.com", string:"abc", value:"123"}];
function modifyTextNodes() {
var el = document.getElementsByTagName('html')[0];
var walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
while(n = walk.nextNode()) {
modifyNode(n);
}
}
function modifyNode(node) {
if (node.nodeType == Node.TEXT_NODE && node.parentNode != undefined && (val = node.nodeValue.trim())) {
var addToEnd = "";
for (var i=0; i<arr.length; i++) {
if (document.baseURI.indexOf(arr[i].url) > -1 && val.indexOf(arr[i].string) > -1) {
addToEnd += arr[i].value;
}
}
}
if (addToEnd) {
node.nodeValue += addToEnd;
}
}
Alternatively, if it is elements that you are trying to find, you could use querySelectorAll to find all the matching elements.
document.querySelectorAll("[class='" + arr[i].string + "']");
In this case 'modifyAllNodes' would look like
function modifyAllNodes() {
for (var i = 0; i<arr.length; i++) {
if (document.baseURI.indexOf(arr[i].url) > -1) {
var nodes = document.querySelectorAll("[class='" + arr[i].string + "']");
modifyNodes(nodes, arr[i]);
}
}
}
function modifyNodes(nodes, arrEl) {
for (var i=0; i<nodes.length; i++) {
if (node.nodeValue.indexOf(arrEl.string) > -1) {
node.nodeValue += arrEl.value;
}
}
}
first you have to know the structure of the list you are trying to "hack", which means the ID or class names. Afterwards, in your JS check each record of that list if its content matches the string you pass to and then do a .append()

<textarea> what key was pressed with javascript

I would like to ask somebody how i can determine what key was pressed in a textarea....
need to write a little javascript code.. a user type in a textarea and i need to write it in a while he writing so the keydown, keypress event handle this functionality, also need to change the text color if a user typed a "watched" word (or the word what he wrote contains the "watched" word/words ) in the textarea.. any idea how i can handle it ??
till now did the text is appear in the <div>, but with this i have a problem.. can't check if the text is in the "watched"... the document.getElementById('IDOFTHETEXTAREATAG'); on keypress is not really works because i got back the whole text inside of the textarea.....
So how i can do it ? any ideas ??? "(Pref. in Mozilla FireFox)
Well, if you were using jQuery, you could do this given that the id of your textarea was 'ta':
$('#ta').keypress(function (evt) {
var $myTextArea = $(this); // encapsulates the textarea in the jQuery object
var fullText = $myTextArea.val(); // here is the full text of the textarea
if (/* do your matching on the full text here */) {
$myTextArea.css('color', 'red'); // changes the textarea font color to red
}
};
I suggest you use the 'onkeyup' event.
$( element ).keyup( function( evt ) {
var keyPressed = evt.keyCode;
//...
});
I have this made like this (plain JS, no JQuery):
function keyDown(e) {
var evt=(e)?e:(window.event)?window.event:null;
if(evt){
if (window.event.srcElement.tagName != 'TEXTAREA') {
var key=(evt.charCode)?evt.charCode: ((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0));
}
}
}
document.onkeydown=keyDown;
This script is in head tag. I am catching this in all textarea tags. Modify it for your purpose.
2 textareas.
In the first textarea I need to write the words or chars what you want to "watch" in the typing text.
In the second textarea I need to type text, so when I type text, under the textarea need to write what is in the textarea (real time) and highlight the whole word if contains the watched words or chars.
For example:
watched: text locker p
text: lockerroom (need to highlite the whole word because it contains the locker word) or apple (contains the p)
who I can do if a word not start with watched word/char to highlite the whole word?
JavaScript:
var text;
var value;
var myArray;
var found = new Boolean(false);
function getWatchedWords()
{
myArray = new Array();
text = document.getElementById('watched');
value = text.value;
myArray = value.split(" ");
for (var i = 0;i < myArray.length; i++)
{
document.getElementById('writewatched').innerHTML += myArray[i] + "<newline>";
}
}
function checkTypeing()
{
var text2 = document.getElementById('typeing');
var value2 = text2.value;
var last = new Array();
last = value2.split(" ");
if (last[last.length-1] == "")
{
if(found)
{
document.getElementById('writetyped').innerHTML += "</span>";
document.getElementById('writetyped').innerHTML += " ";
}
else
document.getElementById('writetyped').innerHTML += " ";
}
else
check(last[last.length-1]);
}
function check(string)
{
for (var i = 0; i < myArray.length; i++)
{
var occur = string.match(myArray[i]);
if(occur != null && occur.length > 0)
{
if (!found)
{
found = true;
document.getElementById('writetyped').innerHTML += "<span style='color: blue;'>";
}
else
{
found = true;
}
}
else
{
}
}
if(found)
{
document.getElementById('writetyped').innerHTML += string;
}
else
{
document.getElementById('writetyped').innerHTML += string;
}
}
HTML:
<html>
<head>
<title>TextEditor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src='script.js' type='text/javascript'></script>
</head>
<body>
<div>
<p>Watched words:</p>
<textarea id="watched" onblur=getWatchedWords();>
</textarea>
</div>
<div id="writewatched">
</div>
<div>
<p>Text:</p>
<textarea id="typeing" onkeyup=checkTypeing();>
</textarea>
</div>
<div id="writetyped">
</div>
</body>
</html>

Categories

Resources