BJ

// Function to normalize text by removing asterisks, punctuation, trimming whitespace, and converting to lowercase
function normalizeText(text) {
  return text ? text.replace(/[^\w\s]/gi, '').trim().toLowerCase() : ''; // Remove punctuation, trim, and convert to lowercase
}

// Function to extract marked words from an editable-57 element
function extractMarkedWords(sourceElement) {
  let markedSegments = new Set(); // Use a Set to ensure uniqueness
  let markElements = sourceElement.querySelectorAll('mark'); // Get the marked text inside <mark> tags

  markElements.forEach(mark => {
    let normalizedMarkText = normalizeText(mark.textContent); // Normalize the text by removing punctuation
    let individualWords = normalizedMarkText.split(/\s+/); // Split the sentence into individual words
    individualWords.forEach(word => {
      if (word.length > 1) { // Skip short words (e.g., 'a', 'i', 'o')
        markedSegments.add(word); // Add each word to the Set
      }
    });
  });

  return markedSegments;
}

// Function to highlight words in a corresponding editable-2077 element
function highlightMatchingWords(targetElement, segments) {
  // Get the original inner HTML of the target element
  let originalHTML = targetElement.innerHTML;

  // Normalize the text content of the target element for matching
  let normalizedHTML = normalizeText(originalHTML);

  // Log the original and normalized HTML for debugging
  console.log('Original HTML:', originalHTML);
  console.log('Normalized HTML:', normalizedHTML);

  // Function to highlight each marked word in the original HTML
  function highlightTest(htmlContent, segments) {
    segments.forEach(segment => {
      if (!segment || segment === "") {
        console.log('Skipping undefined or empty segment');
        return; // Skip undefined or empty segments
      }

      let regex = new RegExp(`\\b(${segment})\\b(?![^<]*>)`, 'gi'); // Ensure the word is standalone with word boundaries
      let matches = normalizedHTML.match(regex); // Check if the word is found

      if (matches) {
        console.log(`Matched word "${segment}" in editable-2077.`);
        // Safely wrap the matched word in the <span> without disrupting the HTML structure
        htmlContent = htmlContent.replace(new RegExp(`\\b(${segment})\\b(?![^<]*>)`, 'gi'), '<span class="marked" style="background-color: yellow;">$1</span>');
      } else {
        console.log(`No match for "${segment}" in this block.`);
      }
    });
    return htmlContent;
  }

  // Apply the highlight function using the individual words
  let highlightedHTML = highlightTest(originalHTML, Array.from(segments));

  // Apply the modified HTML back to the element if any matches were found
  if (highlightedHTML !== originalHTML) {
    targetElement.innerHTML = highlightedHTML;
  } else {
    console.log('No changes made to this element.');
  }
}

// Get all 'editable-57' elements and their corresponding 'editable-2077' elements
let allTargets = Array.from(document.querySelectorAll('[id^="editable-57_sentence_html"]'));

// Iterate over each 'editable-57' element, extract marked words, and highlight in the corresponding 'editable-2077'
allTargets.forEach(sourceElement => {
  let sourceId = sourceElement.id; // Get the ID of the editable-57 element (e.g., 'editable-57_sentence_html1')
  let targetId = sourceId.replace('editable-57', 'editable-2077'); // Replace 'editable-57' with 'editable-2077' for the corresponding target ID

  let targetElement = document.getElementById(targetId); // Find the corresponding editable-2077 element
  if (targetElement) {
    console.log(`Processing ${sourceId} -> ${targetId}`);

    // Extract marked words from the editable-57 element
    let markedSegments = extractMarkedWords(sourceElement);

    // Highlight the matching words in the corresponding editable-2077 element
    highlightMatchingWords(targetElement, markedSegments);
  } else {
    console.log(`No corresponding target found for ${sourceId}`);
  }
});