Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🔢 Nummeröversättning med PHP och JavaScript: Arabiska siffror till devanagari och tillbaka

🔢 Nummeröversättning med PHP och JavaScript: Arabiska siffror till devanagari och tillbaka

En användare fyller i ett formulär på en webbplats, och siffrorna förvandlas till oläsliga tecken. Det här är en välbekant situation för alla som arbetar med flerspråkiga projekt: den nepalesiska versionen av en webbutik visar priser i अक्षर, och kontaktformuläret misslyckas med valideringen på grund av "felaktiga" siffror.

Problemet är att olika språk använder olika siffersystem. Engelska och ryska använder arabiska siffror (0-9). Hindi, nepali och marathi använder devanagari-symboler (०-९). PHP och JavaScript växlar inte mellan dem direkt ur lådan. Ändå kan uppgiften lösas utan ett enda externt bibliotek, med enbart inbyggda strängfunktioner. Inga beroenden att installera, inga tredjeparts-API:er.

Här nedan finns två färdiga kodsnuttar som löser problemet på 5 minuter. Inga ramverk, inga Composer-paket, inga npm-beroenden, bara ren PHP och vanilla JavaScript. Kopiera dem, byt ut dina symboler, så fungerar det.

💡 Snabb översikt:

  • Kopiera PHP-funktionen till ditt temas functions.php eller via tillägget Code Snippets; den konverterar arabiska siffror till devanagari och tillbaka
  • För frontend använder du den färdiga JavaScript-koden med dictionary-objekt för konvertering i realtid direkt i inmatningsfältet
  • Ersättningen använder en teckenuppslagstabell snarare än matematik, vilket gör metoden universell för alla skriftsystem
  • Testa den: skicka in 1234 och få १२३४, och vice versa; båda riktningarna fungerar symmetriskt

Hur siffersystem fungerar i olika språk

De flesta webbplatser arbetar med arabiska siffror: 0 1 2 3 4 5 6 7 8 9. Historiskt sett kom detta system från Indien men fick spridning via arabvärlden, därav namnet.

Alternativa uppsättningar finns i dussintals skriftsystem. Devanagari (hindi, nepali, marathi) använder sin egen serie: ० १ २ ३ ४ ५ ६ ७ ८ ९. Östarabiska siffror (arabiska, persiska, urdu) använder en annan uppsättning: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩. Bengali, thai och khmer har alla sina egna tecken och sina egna Unicode-intervall. Det finns mer än tjugo sådana system totalt.

Men det numeriska värdet förblir detsamma. 5, och ٥ är alla samma tal "fem", bara skrivna med olika symboler. Därför är översättning mellan system en teckenersättning med hjälp av en uppslagstabell, inte en matematisk konvertering. Det finns inget att räkna om; du behöver bara känna till de korrekta symbolparen.

Det är precis principen bakom koden nedan.

Steg 1: Konvertera tal med PHP

Programmerare som arbetar vid en bärbar dator med en kodredigerare öppen

PHP-metoden är så enkel som den kan bli: funktionen str_replace() tar två arrayer, vad som ska hittas och vad som ska ersättas med. Strängen bearbetas i en enda genomgång, och alla träffar ersätts.

Lägg till den här koden i ditt barntemas functions.php eller via tillägget Code Snippets. Funktionen tar emot ett tal eller en sträng som innehåller siffror och returnerar resultatet med devanagari-symboler.

1<?php
2/**
3 * Converts Arabic numerals to Devanagari characters (Hindi, Nepali).
4 *
5 * @param string|int $input String or number to convert.
6 * @return string String with Devanagari numerals.
7 */
8function convert_to_devanagari($input) {
9 $english = array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
10 $devanagari = array("०", "१", "२", "३", "४", "५", "६", "७", "८", "९");
11
12 return str_replace($english, $devanagari, (string) $input);
13}
14
15/* Usage example */
16echo convert_to_devanagari(2026);
17// Output: २०२६
18?>

Vad som händer här: str_replace() itererar genom $english-arrayen, och för varje element (till exempel "2") ersätter den med motsvarande element från $devanagari ("२"). Typomvandling till (string) säkerställer att funktionen fungerar med både tal och strängar.

Omvänd konvertering, från devanagari till arabiska siffror, görs genom att byta plats på arrayerna:

1<?php
2/**
3 * Converts Devanagari characters back to Arabic numerals.
4 *
5 * @param string $input String with Devanagari numerals.
6 * @return string String with Arabic numerals.
7 */
8function convert_from_devanagari($input) {
9 $english = array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
10 $devanagari = array("०", "१", "२", "३", "४", "५", "६", "७", "८", "९");
11
12 return str_replace($devanagari, $english, $input);
13}
14
15/* Example */
16echo convert_from_devanagari('२०२६');
17// Output: 2026
18?>

Arrayerna är desamma; bara argumentordningen ändras. Den första arrayen innehåller nu devanagari-symboler (vad vi söker efter), den andra innehåller arabiska siffror (vad vi ersätter med).

Var man använder det. Funktionen är användbar överallt i temat där siffror visas: produktpriser i WooCommerce, datum i blogginlägg, sidnumrering. Slå in anropet där du behöver siffer-lokalisering för en specifik målgrupp.

Hantera gränsfall i PHP

Funktionen convert_to_devanagari() accepterar string|int, men i praktiken kan indata vara vad som helst. Vad händer om du skickar null, en tom sträng eller en sträng utan siffror? (string) null returnerar en tom sträng, och str_replace() med en tom sträng returnerar också tomt utan fel. En sträng utan siffror (till exempel "Hello") returneras oförändrad eftersom ersättningen inte hittar några träffar.

Om talet innehåller avgränsare (kommatecken för tusental, punkt för decimaler) ligger de kvar; endast själva siffrorna ersätts. För flyttal är detta beteende korrekt, men om talformatering spelar roll och avgränsare bör ändras enligt språkkonventionen, lägg till separat bearbetning via number_format() före konvertering.

För mycket långa tal (till exempel 20-siffriga identifierare) fungerar metoden utan ändringar: str_replace() bearbetar strängar av valfri längd, endast begränsat av tillgängligt PHP-minne. Devanagari-tecken tar 3 byte vardera i UTF-8, så den resulterande strängen blir längre än originalet i byte. För teckenräkning, använd mb_strlen(), inte strlen().

Steg 2: Konvertera tal med JavaScript

På frontend-sidan implementeras samma logik med dictionary-objekt och metoden String.replace() med ett reguljärt uttryck. Detta är praktiskt för dynamiska gränssnitt: användaren matar in ett tal i ett fält, och skriptet visar omedelbart devanagari-motsvarigheten.

Placera den här koden i en separat .js-fil i ditt tema eller via wp_add_inline_script i functions.php. Inga beroenden, ren ES5, fungerar även i gamla webbläsare.

1/**
2 * Dictionaries for translating between Arabic numerals and Devanagari.
3 */
4var englishToDevanagari = {
5 '0': '०', '1': '१', '2': '२', '3': '३', '4': '४',
6 '5': '५', '6': '६', '7': '७', '8': '८', '9': '९'
7};
8
9var devanagariToEnglish = {
10 '०': '0', '१': '1', '२': '2', '३': '3', '४': '4',
11 '५': '5', '६': '6', '७': '7', '८': '8', '९': '9'
12};
13
14/**
15 * Converts Arabic numerals in a string to Devanagari characters.
16 * @param {string|number} input
17 * @returns {string}
18 */
19function toDevanagari(input) {
20 return String(input).replace(/[0-9]/g, function(match) {
21 return englishToDevanagari[match];
22 });
23}
24
25/**
26 * Converts Devanagari characters to Arabic numerals.
27 * @param {string} input
28 * @returns {string}
29 */
30function fromDevanagari(input) {
31 return input.replace(/[०-९]/g, function(match) {
32 return devanagariToEnglish[match];
33 });
34}
35
36// Examples:
37console.log(toDevanagari(9857)); // ९८५७
38console.log(fromDevanagari('१२३४')); // 1234

Nyckelpunkten är det reguljära uttrycket /[0-9]/g. Flaggan g (global) gör att replace() bearbetar varje siffra i strängen, inte bara den första. Den anonyma callback-funktionen tar emot det matchade tecknet och returnerar dess motsvarighet från dictionaryn.

För devanagari-siffror används intervallet [०-९]; i Unicode är dessa tecken sekventiella, så regexet fungerar korrekt.

Var man använder det. Direktinmatning i formulär (konvertering i realtid medan man skriver), visning av priser och datum i lokaliserade versioner av webbplatsen, omvänd konvertering innan formuläret skickas till servern så att arabiska siffror alltid går till databasen.

Praktiskt exempel: kontaktformulär med konvertering i realtid

Låt oss kombinera båda metoderna till en fungerande lösning. Anta att den nepalesiska versionen av en webbplats har ett beställningsformulär där användaren anger ett belopp i devanagari. Uppgiften: visa det inmatade talet i båda systemen för verifiering och skicka arabiska siffror till servern.

Formulärets märkspråk innehåller en <input> och ett förhandsvisningsblock. Vid varje tangenttryckning i fältet utlöses händelsehanteraren input, som anropar toDevanagari() och visar resultatet i ett intilliggande <span>. När formuläret skickas anropas fromDevanagari(), och POST-förfrågans body som skickas till servern innehåller arabiska siffror. PHP-serverkoden tar emot talet i standardformat och arbetar med det som vanligt, utan ytterligare konvertering.

Samma mönster gäller för prisfält, datum, telefonnummer och alla andra fält där användaren förväntar sig att se sitt inhemska siffersystem medan systemet behöver lagra ett enhetligt format. Konvertering tar mikrosekunder och påverkar inte gränssnittets responsivitet.

Se även: video om siffersystem i programmering

För en bredare titt på ämnet hur siffersystem fungerar i kod och hur man konverterar mellan dem i JavaScript, titta på denna genomgång av Techno Geek. Den täcker binära, oktala och decimala system med ett färdigt projekt.

⁉️🤔 Vanliga frågor

Kan samma metod konvertera siffror till arabiska (östarabiska symboler)?

Ja. Ersätt devanagari-arrayen med östarabiska symboler: array("٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"). Logiken är densamma: str_replace() i PHP och en dictionary med regex i JS. Den anpassas lika enkelt till bengali, thai, khmer och alla andra skriftsystem med egna numeriska tecken.

Är det säkert att använda str_replace() för flerbytesträngar i PHP?

Ja, str_replace() fungerar korrekt med UTF-8 och flerbytetecken, till skillnad från strpos() eller substr() som behöver mbstring-motsvarigheter. Devanagari-symboler (, ) tar 3 byte vardera i UTF-8, men str_replace() hanterar dem på ett bytesäkert sätt eftersom den söker efter exakta binära sekvensmatchningar. Det kommer inte att uppstå några problem.

Vad händer om strängen innehåller en blandning av arabiska siffror och devanagari-symboler?

Båda funktionerna bearbetar endast sina respektive intervall. Om convert_to_devanagari() tar emot strängen "Price: 500 रुपय", blir siffran 500 till ५०० medan texten förblir orörd. Den omvända funktionen convert_from_devanagari() påverkar endast devanagari-siffror. Blandad indata hanteras korrekt automatiskt.

Hur kan jag tillämpa konvertering på alla siffror på en WordPress-sida utan att redigera varje mall?

Använd JavaScript-metoden från steg 2 och kör en genomgång av DOM-noder vid sidladdning. Hitta alla textnoder som innehåller siffror (via TreeWalker eller rekursiv childNodes-genomgång) och tillämpa toDevanagari() på deras innehåll. För PHP-metoden på serversidan, använd ett filter på the_content eller gettext om siffror är inbäddade i översättningar.

Var kan jag hitta teckentabeller för andra skriftsystem?

Den auktoritativa källan är Unicode Consortium. För devanagari-siffror är detta intervallet U+0966-U+096F. Östarabiska är U+0660-U+0669. Bengali är U+09E6-U+09EF. Kopiera helt enkelt tecknen från tabellen och sätt in dem i arrayerna; koden behöver inte ändras.

Prestanda och begränsningar med metoden

str_replace() med arrayer på 10 element utför exakt 10 jämförelser för varje position i strängen. För en typisk sträng med 5-10 siffror innebär detta 50-100 operationer; exekveringstiden mäts i mikrosekunder. Som jämförelse innebär metoden med preg_replace_callback() och ett reguljärt uttryck overhead för mönsterkompilering och callback-anrop för varje träff. Skillnaden är omärkbar för små strängar, men str_replace() vinner på stora volymer.

Den främsta begränsningen med metoden är att den ersätter tecken, inte talets semantik. Om du behöver aritmetik på devanagari-tal (addition, multiplikation) kommer devanagari-symboler inte att kännas igen som tal av PHP. Konvertera alltid till arabiska siffror före matematiska operationer och konvertera tillbaka efteråt. Detta är inte en brist i metoden utan en konsekvens av skillnaden mellan skriftsystem och numeriska datatyper.

En annan nyans: metoden förutsätter en en-till-en-överensstämmelse av "ett tecken, en siffra". För skriftsystem där tal skrivs med sammansatta ligaturer (som i vissa historiska system) kommer den enkla ersättningsmetoden inte att fungera. Men för alla moderna indiska skrifter (devanagari, bengali, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam), liksom för östarabiska siffror, är överensstämmelsen strikt 1 till 1, och metoden fungerar felfritt.

Vad ska man driftsätta: PHP, JavaScript eller båda?

PHP-lösningen är för fall när tal måste renderas i målsymbolsystemet på servern innan HTML skickas. Detta är korrekt för SEO: sökmotorn ser innehållet omedelbart i målspråksversionen, inte arabiska siffror som sedan ersätts av ett skript. För en WooCommerce-butik innebär detta att katalog- och produktsidpriser indexeras med devanagari-siffror, vilket positivt påverkar rankningen i de nepalesiska och hindi-segmenten.

JavaScript-varianten är för dynamisk interaktion: ett inmatningsfält med omedelbar förhandsvisning, språkbyte utan sidomladdning, formulärdatakonvertering före inskickning. Den är också oumbärlig för single-page applications (SPA) där servern returnerar JSON med arabiska siffror och frontend renderar dem i användarens språkkonvention.

I praktiken fungerar en kombination bra: PHP renderar sidan med lokaliserade siffror för indexering, medan JavaScript hanterar användarinmatning och konverterar fram och tillbaka i realtid. Båda kodsnuttarna, utan externa beroenden, är färre än 40 rader tillsammans, och de löser fullständigt uppgiften för alla skriftsystem med egna numeriska tecken.

Innan driftsättning, testa tre scenarier: ett direkt funktionsanrop med ett tal, en sträng med blandat innehåll (siffror plus text) och omvänd konvertering. Se till att arabiska siffror alltid når servern, och att gränssnittet visar användaren det system som matchar deras språkförväntningar. Fem minuters testning sparar timmar av felsökning på live-trafik.

Kopiera båda kodsnuttarna till ditt projekt, ersätt med de nödvändiga symbolerna från Unicode-tabellen för ditt skriftsystem, så är uppgiften löst. Allt du behöver är redan inbyggt i språket.