从文本提取动态日期并转指定格式后显示到新子元素的技术求助

Hey there! Let's tackle this date extraction and formatting problem together—even if you're new to regex and string manipulation, this is totally doable. Here's a step-by-step solution for both JavaScript (common for web projects) and Python, depending on what you're working with:

We’ll split this into two core tasks: pulling the date out of your original text, then converting it to the "Month Day, Year" format you need.

Step 1: Extract the Date Fragment #

First, we use a simple regex pattern to target the date structure in your text (11 June, 2018). The pattern looks for a 1-2 digit day, followed by a full month name, a comma, and a 4-digit year.

JavaScript Example #

const originalText = "Canceling your reservation before 6:00 PM (local hotel time) on Monday, 11 June, 2018 will result in no charge.";
// Regex to match the date pattern
const dateRegex = /\b\d{1,2} \w+, \d{4}\b/;
// Extract the first matching date (optional chaining avoids errors if no match is found)
const extractedDateStr = originalText.match(dateRegex)?.[0]; // Returns "11 June, 2018"

Python Example #

import re

original_text = "Canceling your reservation before 6:00 PM (local hotel time) on Monday, 11 June, 2018 will result in no charge."
# Regex to match the date pattern
date_regex = r'\b\d{1,2} \w+, \d{4}\b'
# Extract the first matching date
extracted_date_str = re.search(date_regex, original_text)?.group() # Returns "11 June, 2018"

Step 2: Convert to "Month Day, Year" Format #

Once we have the extracted date string, we’ll parse it into a date object, then reformat it to your desired style.

JavaScript Example #

We can use the browser/Node.js built-in Intl.DateTimeFormat for clean, locale-aware formatting, plus add the result to a new DOM element as you mentioned:

if (extractedDateStr) {
  // Convert the extracted string to a format Date can parse (remove the comma after the month)
  const parseableDate = extractedDateStr.replace(',', '');
  const dateObj = new Date(parseableDate);
  
  // Format to "Month Day, Year"
  const formattedDate = new Intl.DateTimeFormat('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  }).format(dateObj);
  
  console.log(formattedDate); // Outputs: "June 11, 2018"
  
  // Create a new child element and add the formatted date
  const newDateElement = document.createElement('span');
  newDateElement.textContent = formattedDate;
  // Append to your target parent element (replace with your actual parent selector)
  document.querySelector('.reservation-date-container').appendChild(newDateElement);
}

Python Example #

Python’s datetime module makes parsing and formatting straightforward:

from datetime import datetime

if extracted_date_str:
  # Parse the extracted string into a datetime object (format codes match the input structure)
  date_obj = datetime.strptime(extracted_date_str, '%d %B, %Y')
  
  # Format to "Month Day, Year"
  formatted_date = date_obj.strftime('%B %d, %Y')
  
  print(formatted_date) # Outputs: "June 11, 2018"

Quick Notes #

• The regex pattern works for any full month name (e.g., "January", "October") and 1-2 digit days (like "5 May, 2020" or "15 March, 2023").
• If you need to handle multiple dates in a single text, swap match/search with matchAll/findall to grab all matching dates.

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