如何基于HTML模板结合JavaScript实现文本文件单段落独立加载与引用

Absolutely, you can make this work with JavaScript—let me show you a clean approach that checks all your boxes: loading content from a single text file, mapping each paragraph to its own HTML element, and keeping your HTML template untouched when content changes.

Here's how to implement it: #

First, set up your HTML to reference the text file once (no need to hardcode paths all over) and provide a container for your dynamic content:

<!-- Store your text file path here—easy to update later -->
<span id="textFileRef" data-path="file.txt" style="display: none;"></span>

<!-- This container will hold all your generated paragraph divs -->
<div id="contentWrapper"></div>

Next, use JavaScript to load the text file, split it into individual paragraphs, and generate the HTML structure you want:

// Grab the text file path from our hidden reference
const textFilePath = document.getElementById('textFileRef').dataset.path;

// Fetch and process the text file
fetch(textFilePath)
  .then(response => {
    if (!response.ok) throw new Error('Couldn’t load the text file');
    return response.text();
  })
  .then(rawText => {
    // Split the text into paragraphs—adjust this regex to match your file's formatting
    // This example splits on empty lines (common for paragraph breaks)
    const paragraphs = rawText.split(/\n\s*\n/).filter(para => para.trim() !== '');
    
    const contentWrapper = document.getElementById('contentWrapper');
    
    // Loop through each paragraph and build your desired HTML
    paragraphs.forEach((paraContent, index) => {
      const div = document.createElement('div');
      const p = document.createElement('p');
      
      // Set the "txt" attribute with the paragraph content
      p.setAttribute('txt', paraContent.trim());
      // Optional: Add the text to the paragraph so it displays on the page
      p.textContent = paraContent.trim();
      
      div.appendChild(p);
      contentWrapper.appendChild(div);
    });
  })
  .catch(err => console.error('Oops, something went wrong:', err));

Key details to tweak: #

• Paragraph splitting: The regex /\n\s*\n/ splits text on empty lines. If your text file uses a different separator (like single newlines for each paragraph), replace it with split('\n') and keep the filter to remove empty lines.
• Predefined placeholders: If you want to hardcode some <div><p> elements in your HTML (for styling or specific layouts), add a data-index attribute to each <p> tag (e.g., <p data-index="0"></p>) and modify the loop to target those elements instead of creating new ones:

  paragraphs.forEach((paraContent, index) => {
    const targetPara = document.querySelector(`p[data-index="${index}"]`);
    if (targetPara) {
      targetPara.setAttribute('txt', paraContent.trim());
      targetPara.textContent = paraContent.trim();
    }
  });
  

• Reusable variables: The paragraphs array holds all your text content as individual strings, so you can easily reference or modify any paragraph later (e.g., update a specific <p> tag's content dynamically).

This setup lets you update all your text by just editing file.txt—no changes to your HTML needed. It handles variable numbers of paragraphs automatically, so you don’t have to worry about adding/removing elements in the template.

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