换行符 JSON 字符串 Javascript

Question

I'm trying to read data from a JSON file that contains a list of blogs. I want to break each of those blogs into small paragraphs. I thought adding \n would do the job but it's not. How can I achieve this?

This is my blogs.json file:

[
  {
    "id": 1,
    "name": "The 48 Laws Of Power",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/RpP2LGp/48-Laws-Of-Power.jpg"
  },
  {
    "id": 2,
    "name": "Rich Dad Poor Dad",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/8Brh2Nc/rich-Dad-Poor-Dad.jpg"
  },
  {
    "id": 3,
    "name": "Show Your Work",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/VjLBT1T/show-Your-Work.jpg"
  },
  {
    "id": 4,
    "name": "Atomic Habits",
    "blog": "Atomic Habits by James Clear is an incredible book on habits and the massive effect that they have on our lives. Published in 2018 and now an international bestseller, Atomic Habits centers around this idea that “habits are the compound interest self-improvement.” If you want to improve yourself in any way, look first to your daily habits. \n Clear relates habits to compound interest; an interesting model he suggests that really helped me visualize the effect that these tiny behaviors had on our lives is set up like this. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/ss0kLQw/atomic-Habits.jpg"
  },
  {
    "id": 5,
    "name": "The Almanack Of Naval Ravikant",
    "blog": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/87SmcFz/alamanack-naval.jpg"
  },
  {
    "id": 6,
    "name": "The 4-Hour Work Week",
    "blog": "The first chapter, D is for Definition, followed its name and defined the clear cut differences in mindset between the new rich and the deferrers. This clued me in to the goal of this book, to escape what has been perpetuated our entire lives. However, I was still skeptical. It presented several, grandiose claims; how could any of it be truly doable? Sure, someone like Tim Ferriss, Princeton graduate and energy-supplement extraordinaire could pull it off, but that doesn't mean that me, the average Joe, could somehow make an automated stream of revenue so that I can live all around the world and have no worries.The next chapter, E is for Elimination, had the most profound effect on me. It presented ideas such as Parkinson's Law (work expands to fill the time allotted to it) and the Pareto Principle (80/20), ideas I had heard from videos before, but never explained as well as in this chapter. After reading, I immediately evaluated my time wasters and consumers and began to slowly deconstruct my day and how to best optimize it. This chapter was one that I could apply the day after reading it successfully, so it was very useful. \n The next chapter, E is for Elimination, had the most profound effect on me. It presented ideas such as Parkinson's Law (work expands to fill the time allotted to it) and the Pareto Principle (80/20), ideas I had heard from videos before, but never explained as well as in this chapter. After reading, I immediately evaluated my time wasters and consumers and began to slowly deconstruct my day and how to best optimize it. This chapter was one that I could apply the day after reading it successfully, so it was very useful. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
    "img": "https://i.ibb.co/Pxtt4dH/4-hour-work-week.jpg"
  }
]

And here's how I'm reading from it BookDetails.js :

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const BookDetails = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState({});

  useEffect(() => {
    const url = `/blogs.json`;
    console.log(url);
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        const currentBlogArray = data.filter((book) => book.id == id);
        setBlog(currentBlogArray.length > 0 ? currentBlogArray[0] : {});
      });
  }, []);

  return (
    <div className="px-6">
      <h2>This is book details: {id} </h2>

      <h2 className="flex justify-center font-bold text-2xl mb-6">
        {" "}
        {blog.name}
      </h2>
      <h2> {blog.blog}</h2>
    </div>
  );
};

export default BookDetails;

Answer 1

You can add <p> tag for each needed place on the string then while reading JSON split it based on <p> tag and then create your own HTML.

example:

 const json = "Paragraph 1<p>Paragraph 2"; const p = document.querySelector('#paragraph'); p.innerHTML = json.split('<p>').map(paragraph=>{ return '<p>' + paragraph + '</p>'; }).join('')

 <html> <body> <div id="paragraph"> </div> </body> </html>

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const BookDetails = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState({});
  useEffect(() => {
    const url = `blogs.json`;
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        const currentBlogArray = data.filter((book) => book.id == id);
        const currentBlog =
          currentBlogArray.length > 0 ? currentBlogArray[0] : {};
        setBlog({
          ...currentBlog,
          blog: currentBlog.blog.split("\n"),
        });
      });
  }, []);

  return (
    <div className="px-6">
      <h2>This is book details: {id} </h2>
      <h2 className="flex justify-center font-bold text-2xl mb-6">
        {blog.name}
      </h2>
      <h2>
        {blog.blog?.map((paragraph) => {
          return (
            <p>
              <span style={{ marginLeft: 25 }}></span>
              {paragraph}
            </p>
          );
        })}
      </h2>
    </div>
  );
};

export default BookDetails;

Answer 2

Replace:

<h2> {blog.blog} </h2>

With

<h2> {blog.blog.split(/\n/).map((t,i) => (<div key={i}>{t}</div>))} </h2>

This will split your text at the newline character (discarding it). Each resulting substring is then mapped into a div for display.

Answer 3

Replace \\n\\ with \n to add a line break. Use \n\n to add two line breaks.