Mutashabihat ul Quran

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]

️How to Highlight 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 (pseudo code)

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