How to sort list by Persian alphabet?
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>
To sort a list alphabetically in Persion, I used this code with <meta charset="utf-8">
and its result was perfect:
const myList = ["ی","گ","پ", "ژ"];
const collator = new Intl.Collator('fa');
const sortedLetters = myList.sort(collator.compare);
console.log(sortedLetters);
The Intl.Collator objects enable language sensitive string comparison.
For other languages, you can replace fa:
ar — Arabic
bg — Bulgarian
ca — Catalan
zh-Hans — Chinese, Han (Simplified variant)
cs — Czech
da — Danish
de — German
el — Modern Greek (1453 and later)
en — English
es — Spanish
fi — Finnish ,....
for more information please visit https://dev.to/aumayeung/comparing-non-english-strings-with-javascript-collators-57bf and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator
I never tested it and really cannot do it because I have no idea what letter comes before or after in arabic but I can point you to the right direction. You will need to use localeCompare in a way similiar to this:
arr.sort((x,y)=>x.localeCompare(y, 'ar-ma'))
ar-ma
being Arabian Morocco language code which you should change to the language code of your needs.