如何为自建论坛实现自定义BBCode？重点开发QUOTE标签功能

Alright, let's walk through implementing the [QUOTE] BBCode feature for your self-hosted forum. I'll cover both the frontend interaction (the quote button behavior) and backend rendering (displaying the quoted content properly) to make this work smoothly:

First, we need to make the quote button populate the textarea with the wrapped QUOTE tag when clicked. Here's how to set that up:

• Add the Quote Button to Posts/Replies
  Attach a quote button to each existing post, with data attributes storing the quoted user's name and the post content. This makes it easy to grab the needed info on click:

  <div class="post">
    <div class="post-author">Jane</div>
    <div class="post-content">This is a quote</div>
    <button class="quote-btn" data-username="Jane" data-content="This is a quote">Quote</button>
  </div>
  

• Handle the Click Event with JavaScript
  Write a script to listen for quote button clicks, extract the username and content, then insert the formatted QUOTE tag into the post textarea. This example appends the quote to any existing content in the textarea:

  // Target all quote buttons
  document.querySelectorAll('.quote-btn').forEach(button => {
    button.addEventListener('click', () => {
      const username = button.dataset.username;
      const rawContent = button.dataset.content;
      // Clean line breaks or special chars if needed (adjust based on your input handling)
      const cleanedContent = rawContent.replace(/[\n\r]/g, ' ').trim();
      // Build the BBCode quote tag
      const quoteBBCode = `[QUOTE name=${username}]${cleanedContent}[/QUOTE] `;
      
      const textarea = document.getElementById('new-post-textarea');
      // Append the quote to the textarea's current value
      textarea.value += quoteBBCode;
      // Focus the textarea so the user can start typing right after
      textarea.focus();
    });
  });
  

  Pro tip: If you want to insert the quote at the user's current cursor position instead of appending, use textarea.selectionStart and textarea.selectionEnd to split the existing value and inject the quote in the middle—this feels more intuitive for users who are typing mid-post.

Once the user submits their post with the QUOTE tag, you need to parse that BBCode into styled HTML for display. Here's a reliable way to do it:

• Parse BBCode with Regex
  Use a regular expression to match the QUOTE pattern and replace it with structured HTML. This example uses JavaScript, but you can adapt the regex logic to your backend language (PHP, Python, etc.):

  function parseForumBBCode(rawContent) {
    // Match [QUOTE name=Username]Quoted content[/QUOTE]
    const quoteRegex = /\[QUOTE name=(\w+)\](.*?)\[\/QUOTE\]/gs;
    // Replace matches with styled HTML blocks
    return rawContent.replace(quoteRegex, (match, username, quotedText) => {
      // Escape HTML chars to prevent XSS attacks (critical for user-generated content!)
      const safeUsername = escapeHtml(username);
      const safeQuotedText = escapeHtml(quotedText);
      
      return `
        <div class="quote-container">
          <div class="quote-header">Quoted from ${safeUsername}:</div>
          <div class="quote-body">${safeQuotedText}</div>
        </div>
      `;
    });
  }
  
  // Helper function to escape HTML special characters
  function escapeHtml(text) {
    return text.replace(/[&<>"']/g, char => {
      const entities = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
      return entities[char];
    });
  }
  

• Style the Quote Block with CSS
  Add some CSS to make quoted content visually distinct from regular posts:

  .quote-container {
    border-left: 4px solid #e0e0e0;
    padding: 10px 15px;
    margin: 10px 0;
    background-color: #f9f9f9;
  }
  .quote-header {
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
  }
  .quote-body {
    color: #666;
    font-style: italic;
  }
  

• XSS Protection: Never skip escaping user-generated content! The escapeHtml function above prevents malicious users from injecting harmful scripts into quotes.
• Empty or Malformed Quotes: Add checks to ignore empty QUOTE tags (e.g., [QUOTE name=Jane][/QUOTE]) or malformed tags that don't match your regex pattern.
• Nested Quotes (Future Enhancement): If you plan to support nested quotes later, regex won't be enough—you'll need a recursive parser. But for your initial implementation, regex works perfectly.

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