网页文本高亮工具开发咨询：双色标注与后端提交功能实现

Hey there! Let's tackle your web text highlighting tool step by step—first fixing the color change issue, then adding the quick number-based marking (like Thunderbird's), and finally setting up the backend submission.

The most common reason your color change isn't working is that raw text nodes can't be styled directly. You need to wrap selected text in an HTML element (like a <span>) and apply styles to that element. Here's how to fix it:

First, add basic CSS for your highlight categories:

.highlight-good {
  background-color: #d4edda;
  color: #155724; /* Dark green for readability */
}
.highlight-bad {
  background-color: #f8d7da;
  color: #721c24; /* Dark red */
}

Then write a function to wrap selected text in a styled span:

function highlightSelection(highlightClass) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return; // Exit if nothing's selected

  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.className = highlightClass;

  // Wrap the selected text with the span
  range.surroundContents(span);
  selection.removeAllRanges(); // Clear selection after highlighting
}

Wire this to your buttons:

<button onclick="highlightSelection('highlight-good')">Mark as Good (Green)</button>
<button onclick="highlightSelection('highlight-bad')">Mark as Bad (Red)</button>

This will properly wrap your selected text in styled spans—no more missing color changes!

To let users press numbers (e.g., 1 for good, 2 for bad) instead of clicking buttons, add a keydown listener:

document.addEventListener('keydown', (e) => {
  const selection = window.getSelection();
  if (!selection.toString().trim()) return; // Only act if text is selected

  switch(e.key) {
    case '1':
      e.preventDefault(); // Prevent accidental page scrolling
      highlightSelection('highlight-good');
      break;
    case '2':
      e.preventDefault();
      highlightSelection('highlight-bad');
      break;
    // Add more keys here if you need extra categories
  }
});

Now users can select text and hit 1 or 2 to mark it instantly—just like Thunderbird!

To send annotated text to your backend, you need to collect all marked sections and their context. Here's how to gather and submit that data:

First, a function to collect marked content:

function collectMarkedContent() {
  const markedElements = document.querySelectorAll('.highlight-good, .highlight-bad');
  const annotations = Array.from(markedElements).map(el => {
    return {
      text: el.textContent,
      type: el.classList.contains('highlight-good') ? 'good' : 'bad',
      // Optional: Grab parent paragraph for context
      paragraph: el.closest('p')?.textContent.trim() || 'Unknown paragraph'
    };
  });

  // Include full page text if your backend needs it
  const fullContent = document.querySelector('.text-container').textContent.trim();

  return {
    fullContent,
    annotations
  };
}

Then a submit function to send data to your backend:

async function submitAnnotations() {
  const data = collectMarkedContent();
  try {
    const response = await fetch('/your-backend-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      alert('Annotations submitted successfully!');
    } else {
      throw new Error('Submission failed');
    }
  } catch (err) {
    console.error('Error submitting:', err);
    alert('There was an error submitting your annotations.');
  }
}

Add a submit button to trigger this:

<button onclick="submitAnnotations()">Submit Annotations</button>

• Wrap all your text paragraphs in a container (like <div class="text-container">) so the collectMarkedContent function can find them easily.
• If using jsFiddle, double-check that CSS is in the "CSS" tab, JS in the "JavaScript" tab, and HTML in the "HTML" tab—misplaced code often causes issues.
• Test the selection wrapping first: select text, click a button, then use your browser's dev tools to confirm the <span> is being added correctly.

内容的提问来源于stack exchange，提问作者Eamonn Kenny