每個“.”后換行

Question

我正在使用 Axios 從 API 獲取數據。然后我將數據呈現給用戶。 問題是文本可能會很長，我想在每個“.”之后添加一個換行符。 為了更好的呈現。 有誰知道用 CSS 或任何其他方式做到這一點的方法嗎？ 謝謝你。 順便說一句，我正在使用 javascript。

我正在嘗試您的代碼，但我的數據仍未被修改。 我犯錯了嗎？ 我是js的新手。

function App() {
  const [cardChosen, setCardChosen] = useState(false);
  const [cardName, setCardName] = useState("");
  const [card, setCard] = useState({
    passageName: "",
    passages: "",

  });

  const searchCard = () => {

    //this has been changed from the original
    Axios.get(`https://bible-api.com/${cardName}`)
    .then((response) => {
      console.log(response);
      setCard({
        passageName: cardName,
        passages: response.data.text,
        passage: card.passages.replaceAll('. ', '.\n')
      });

      setCardChosen(true);
    });
 //   addNewLines(card.passage);
  };

  // const addNewLines = () => {
  //   card.passage = card.passage.replaceAll('. ', '.\n');
  // };

  return (
    <div className="App">
      <div className="TitleSection">
        <h1>Bible passages</h1>
        <input type="text" onChange= {(event) => {
          setCardName(event.target.value);
          }}
        />
        <button onClick={searchCard}>Search the Bible</button>
      </div>
      <div className="DisplaySection">
        {!cardChosen ?
        (<>
        <h3> Please write the passage you want to read.</h3>
        <h6>Format example: john 3:16</h6>
        <h6>If you want several passages, write: john 3:1-16</h6>
        </>)
        :
        (
        <>
        <h1>{card.passageName}</h1>
        <h4>{card.passage}</h4>
        </>
        )}

      </div>
    </div>
  );
}

export default App;

Answer 1

如果您將數據作為 javascript 中的字符串，您可以這樣做：

const myString = 'Hello, this is a string with one line. It will soon have 2 lines.'
const stringWithNewLines = myString.replaceAll('.', '.\n'); 

這會將所有出現的句點替換為句點后跟新行（\n 是換行符）。 新字符串現在是：

Hello, this is a string with one line.
 It will soon have 2 lines.

注意現在第二行的開頭有一個空格，因為句點后面有一個空格。 如果你想擺脫空間做

const stringWithNewLines = myString.replaceAll('. ', '.\n'); 

所以現在它也在替換空間。

請注意， replaceAll返回一個新字符串並且不會修改原始字符串。

我很確定在 CSS 中沒有辦法做到這一點，但如果你的字符串已經在 javascript 中，那將非常容易。

Answer 2

您需要添加修改在每個之后添加\n的文本. （點和空格）與 javascript。

const textFromAPI = 'Lorem ipsum. Dolor sit amet. Consectetur adipiscing elit.';
const modifiedText = textFromAPI.replaceAll(/\. /g, '.\n');

在那之后，你應該把文本放在一個有white-space: pre;的元素中。 或white-space: pre-wrap; CSS 規則。更多關於空白規則

<div style="white-space: pre;">
 <!-- modifiedText goes here -->
</div>

Answer 3

您可以通過多種方式實現這一目標，其中兩種正在使用：

1. string.prototype.split( )和array.prototype.join( )

   text = text.split('.').join('. <br/>');

2. string.prototype.replace( )

   text = text.replace(/\./g, '. <br/>');

請在下面執行此代碼段。 我加了一些css，你可以無視。

 let text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue, enim sit amet dictum varius, purus massa tempus eros, eu porttitor magna tellus vel quam. In hac habitasse platea dictumst. Quisque sit amet placerat tortor, a euismod tortor. Phasellus eget placerat nisl, sit amet aliquet felis. Nulla lacus est, euismod vitae aliquam ut, mollis at odio. Cras tempor volutpat tellus, id sagittis orci mollis ut. Nulla aliquam mattis tortor. Curabitur lacus erat, ultrices in tempor sit amet, scelerisque sed risus. Nunc ultrices vulputate nisi, eu pulvinar neque laoreet auctor. Nunc ullamcorper nec enim in tincidunt. Duis sit amet viverra tellus, eu ultrices orci.'; const element = document.querySelector('.text'); //Either This //text = text.split('.').join('. <br/>') //or This text = text.replace(/\./g, '. <br/>') element.innerHTML = text;

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); .text{ font-size: 16px; font-family: 'Roboto', sans-serif; color:#ffeaa7; }.card{ border-radius: 0px 5px 0px 0px; padding: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.9); background-color: #2d3436; transition: all 0.2s; }

 <div class="card"> <p class="text"><p> </div>