Mutashabihat ul Quran

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.

Mutashabihat data format

"50": {
  "surahs": 32,
  "ayahs": 70,
  "count": 71,
  "source": {
    "key": "2:23",
    "from": 15,
    "to": 17
  },
  "ayah": {
    "19:48": [
      [4, 6]
    ],
    "2:23": [
      [15, 17]
    ]
  }
}

  "2:23": [50, 16379]

Highlighting shared phrases

To highlight phrases in a given Ayah:

1. Use phrase_verses.json to get phrase IDs for the Ayah
2. Look up each phrase ID in phrases.json
3. Get the word ranges for the current Ayah (e.g., [4,6] means words 4 to 6)
4. Apply styling (e.g., background color) to those word indices in the Ayah

Example rendering logic

// 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;