Mutashabihat helps identify and explore similar phrases across Ayahs in the Quran. These similar phrases often reflect similarities in meaning, context, or wording, providing deeper insights into thematic connections and Quranic expression.
For those memorizing the Quran, this data is especially valuable. Many Ayahs in the Quran share nearly identical openings, endings, or similar phrases, which can be confusing during memorization and revision. Showing similar phrases across Ayahs can help learners compare them more effectively and avoid confusion during memorization. Mutashabihat not only reduces mistakes but also strengthens long-term retention by reinforcing subtle differences and patterns.
⚠️ You need Word by Word Quran script to render and highlight phrases. Download it here
The ZIP file contains two JSON files:
phrases.json: A list of all shared phrasesphrase_verses.json: A mapping of each Ayah to the phrase IDs
"50": {
"surahs": 32,
"ayahs": 70,
"count": 71,
"source": {
"key": "2:23",
"from": 15,
"to": 17
},
"ayah": {
"19:48": [
[4, 6]
],
"2:23": [
[15, 17]
]
}
}
surah:ayah format and value is word range in ayah, these words should be highlighted
while showing this phrase.
"2:23": [50, 16379]
surah:ayah formatTo highlight phrases in a given Ayah:
phrase_verses.json to get phrase IDs for the Ayahphrases.json[4,6] means words 4 to 6)// Required: Load phrases.json, phrase_verses.json, and Quran words data
const phraseVerses = /* loaded from phrase_verses.json */;
const phrases = /* loaded from phrases.json */;
const quranWords = /* word-level Quran script, e.g., { "2:23": ["word1", "word2", ...] } */;
function getPhraseColor(phraseId) {
// generate phrase color
}
function renderAyahWithPhrases(ayahKey) {
const words = quranWords[ayahKey];
const phraseIds = phraseVerses[ayahKey] || [];
const highlights = [];
phraseIds.forEach((phraseId) => {
const phrase = phrases[phraseId];
const ranges = phrase.ayah[ayahKey] || [];
ranges.forEach(([start, end]) => {
for (let i = start - 1; i <= end - 1; i++) {
highlights[i] = getPhraseColor(phraseId);
}
});
});
// Render each word with optional highlight
return words
.map((word, i) => {
const color = highlights[i];
return color
? `<span style="background-color: ${color}; padding: 0 4px;">${word}</span>`
: word;
})
.join(" ");
}
const html = renderAyahWithPhrases("2:23");
document.getElementById("ayah").innerHTML = html;