Есть ли способ отобразить текстовый файл внутри div, используя JavaScript и HTML?

Question

Я работаю над блогоподобной страницей проекта. Когда пользователь нажимает на заголовок, div отображается с сообщением. В настоящее время у меня есть текст для первого сообщения в моем HTML-файле. Тем не менее, есть довольно много сообщений, и я не хочу, чтобы все они были в моем HTML. Есть ли способ вставить текстовый файл вместо того, чтобы печатать весь текст?

Я исследовал это и нашел много информации об использовании PHP. Тем не менее, я не очень знаком с ним, так что если кто-то может объяснить этот процесс подробно, если это лучший вариант, который будет принят с благодарностью.

    <!-- I have this div with the text and I would like to replace it with a text file. -->
    <div id="b1">
     <span class="closebtn">x</span>
     <h2> Integrating Informational Technology with Operational Technology </h2>
        <h3> What Are the Challenges? </h3>
        <p> The common challenge manufacturers face when integrating new technology to drive efficiencies is most often having a “connected” system. Three usual issues prevent manufacturing companies from pursuing a connected system including human barriers, rising costs, and a lack...</p>
    </div>

    <!-- More text here -->

Answer 1

Здесь есть две проблемы. Во-первых, это получение самого контента. Второе - это отображение содержимого в том виде, в котором вы хотите его отобразить.

Первая часть проста, если текстовый файл можно загрузить через HTTP. Вот как это можно сделать с помощью fetch API :

fetch('/static/blog-posts/2019-08-12-blog-title.txt')
  .then(res => res.text())
  .then(text => {
    const insertAt = document.querySelector('#some-element-selector');
    insertAt.textContent = text;
  });

Однако следует отметить, что простой текст вставлен в HTML может отображаться не так, как вы ожидаете. Например, в HTML пробельные символы разрушаются и единообразно рассматриваются как пробелы. Вставленный текст, например, не будет отображать разрывы строк HTML, если в тексте есть разрывы строк. Вы можете исправить это, убедившись, что ваш целевой элемент использует стиль white-space: pre или какой-либо другой параметр пробела, соответствующий желаемому:

#some-element-selector {
  white-space: pre;
}

Если это все еще не отображаетсяКак и ожидалось, вы можете захотеть исследовать процессор уценки, который преобразует файлы .md в HTML, поскольку они позволяют использовать еще больше возможностей форматирования без громоздкости HTML.

Answer 2

Вы можете извлекать текст с помощью http запросов ( mdn fetch API , mdn Body.text()) и обновлять текст div, назначая свойству textContent.

Вместе это выглядит как

fetch('your-text-resource').then(response => 
  document.querySelector('my-div') = response.text());