How can I read testArrray in ul li and sort this list?
lis.sort(function(a,b)) has English/Arabic/and alphabet support, not Persian alphabet support. Help me please. Thank you
var alphabets = ["ا", "ب", "پ", "ت", "ث", "ج", "چ", "ح", "خ", "د", "ذ", "ر", "ز", "ژ", "س", "ش", "ص", "ض", "ط", "ظ", "ع", "غ", "ف", "ق",
"ک", "گ", "ل", "م", "ن", "و", "ه", "ی", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
];
var testArrray = ["ی", "گ", "ژ", "پ"];
var aChar;
var bChar;
function OrderFunc() {
testArrray.sort(function(a, b) {
return CharCompare(a, b, 0);
});
document.getElementById("result").innerHTML = testArrray;;
}
function CharCompare(a, b, index) {
if (index == a.length || index == b.length)
return 0;
aChar = alphabets.indexOf(a.toUpperCase().charAt(index));
bChar = alphabets.indexOf(b.toUpperCase().charAt(index));
if (aChar != bChar)
return aChar - bChar
else
return CharCompare(a, b, index + 1)
}<html>
<head></head>
<body onload="OrderFunc()">
<div id="result"></div>
<ul class="myul">
<li>ی</li>
<li>پ</li>
<li>گ</li>
<li>ژ</li>
</ul>
</body>
</html>Advertisement
Answer
String#localeCompare is supposed to be locale-aware and compare strings appropriately, so:
function OrderFunc() {
// Get the list
const ul = document.querySelector(".myul");
// Get its items as an array
const lis = [...ul.querySelectorAll("li")];
// Sort the array with localeCompare
lis.sort((a, b) => a.textContent.localeCompare(b.textContent));
// Move each of them to the end of the list; this
// puts them back in order
for (const li of lis) {
ul.appendChild(li);
}
}
Live Example:
function OrderFunc() {
// Get the list
const ul = document.querySelector(".myul");
// Get its items as an array
const lis = [...ul.querySelectorAll("li")];
// Sort the array with localeCompare
lis.sort((a, b) => a.textContent.localeCompare(b.textContent));
// Move each of them to the end of the list; this
// puts them back in order
for (const li of lis) {
ul.appendChild(li);
}
}
OrderFunc();<div id="result"></div> <ul class="myul"> <li>ی</li> <li>پ</li> <li>گ</li> <li>ژ</li> </ul>
You may need to pass some options to localeCompare, see the ECMAScript® Internationalization API Specification for more on that.
In a comment you asked:
What will i do first Persian and Second English Words?
If you’re asking how to sort Persian words above English ones in the list, I think you’ll probably have to detect what script the text is written in. You’re supposed to be able to do that with a JavaScript regular expression, but the feature (Unicode property excapes) is new and not well-supported yet. You can use the XRegExp library to do it, though:
// This checks to see if the FULL string is in Arabic script; you'll
// probably have to adjust it to fix your use case
const rexArabic = XRegExp("^\p{Arabic}+$");
function OrderFunc() {
// Get the list
const ul = document.querySelector(".myul");
// Get its items as an array
const lis = [...ul.querySelectorAll("li")];
// Sort the array with localeCompare
lis.sort(({textContent: a}, {textContent: b}) => {
const aArabicScript = rexArabic.test(a);
const bArabicScript = rexArabic.test(b);
if (aArabicScript && !bArabicScript) {
// `a` is in Arabic script, `b` isn't; `a` should be first
return -1;
}
if (!aArabicScript && bArabicScript) {
// `b` is in Arabic script, `a` isn't; `b` should be first
return 1;
}
// They're in the same script
return a.localeCompare(b);
});
// Move each of them to the end of the list; this
// puts them back in order
for (const li of lis) {
ul.appendChild(li);
}
}
Live Example:
// This checks to see if the FULL string is in Arabic script; you'll
// probably have to adjust it to fix your use case
const rexArabic = XRegExp("^\p{Arabic}+$");
function OrderFunc() {
// Get the list
const ul = document.querySelector(".myul");
// Get its items as an array
const lis = [...ul.querySelectorAll("li")];
// Sort the array with localeCompare
lis.sort(({textContent: a}, {textContent: b}) => {
const aArabicScript = rexArabic.test(a);
const bArabicScript = rexArabic.test(b);
if (aArabicScript && !bArabicScript) {
// `a` is in Arabic script, `b` isn't; `a` should be first
return -1;
}
if (!aArabicScript && bArabicScript) {
// `b` is in Arabic script, `a` isn't; `b` should be first
return 1;
}
// They're in the same script
return a.localeCompare(b);
});
// Move each of them to the end of the list; this
// puts them back in order
for (const li of lis) {
ul.appendChild(li);
}
}
OrderFunc();<div id="result"></div> <ul class="myul"> <li>ی</li> <li>پ</li> <li>Some English</li> <li>گ</li> <li>More English</li> <li>ژ</li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/3.2.0/xregexp-all.min.js"></script>