如何使用 JavaScript 直接从按钮创建推文？

Question

我正在创建一个随机报价生成器，并附有在此链接中找到的教程：https://www.youtube.com/watch?v=pbWHp63-V3c&t=2465s

在 40 分钟左右的视频中，他添加了创建推文的功能，并将引文自动填充到推文的输入中。我知道 twitter 在向 X 的过渡过程中经历了一些变化，但这似乎对我不起作用。这是我到目前为止编写的代码：

    <script>
      const QUOTEBANK = [
        {
          quote: "We suffer more often in imagination than in reality.",
          author: "Seneca",
        },
        {
          quote:
            "You're the air I breathe. You're EVERYTHING to me. I wish you could see yourself through my eyes...",
          author: "Clara Dobbins",
        },
        {
          quote:
            "Accept the things to which fate binds you, and love the people with whom fate brings you together, but do so with all your heart",
          author: "Marcus Aurelius",
        },
        {
          quote: "He has the most who is most content with the least.",
          author: "Diogenes",
        },
        {
          quote:
            "For a man to conquer himself is the first and noblest of all victories",
          author: "Plato",
        },
        {
          quote:
            "It's not what happens to you, but how you react to it that matters.",
          author: "Epictetus",
        },
        {
          quote: "The goal of life is living in agreement with Nature",
          author: "Zeno of Citium",
        },
      ];
      window.onload = init;
      function init() {}

      function generateQuote() {
        let quoteSize = QUOTEBANK.length;
        let randomIndex = Math.floor(Math.random() * quoteSize);
        let randomQuoteData = QUOTEBANK[randomIndex];

        let twitterLink =
          "https://twitter.com/intent/tweet?hashtags=quotes&amp;related=freecodecamp&amp;text=%22";

        //Add the quote
        let quoteInApiFormat = randomQuoteData.quote.replace(/ /g, "%20");
        twitterLink += quoteInApiFormat;
        //Add the author
        let authorInApiFormat = randomQuoteData.author.replace(/ /g, "%20");

        twitterLink += authorInApiFormat;

        document.getElementById("tweet-quote").href = twitterLink;
        document.getElementById("text").innerText = randomQuoteData.quote;
        document.getElementById("author").innerText = randomQuoteData.author;
      }
    </script>

我尝试实现与教程相同的代码，但是当我按下链接时，我只收到一条推文，上面写着“#quotes”而不是我的引用。

Answer 1

您面临的主要问题是为 Twitter 意图形成的 URL 格式不正确，尤其是文本和作者的分隔符。

解决方法如下：

1. 在 Twitter 链接的形成中，您有“&”，它是

   &

   的 HTML 实体。您应该只使用

   &

   。

2. 推文文本的格式在引用和作者之间缺少分隔符。

让我们修改您的函数来纠正这些问题：

function generateQuote() {
    let quoteSize = QUOTEBANK.length;
    let randomIndex = Math.floor(Math.random() * quoteSize);
    let randomQuoteData = QUOTEBANK[randomIndex];

    // Encode the quote and author
    let quoteInApiFormat = encodeURIComponent('"' + randomQuoteData.quote + '"');
    let authorInApiFormat = encodeURIComponent('- ' + randomQuoteData.author);

    // Form the Twitter link
    let twitterLink = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
    twitterLink += quoteInApiFormat + " " + authorInApiFormat;

    document.getElementById("tweet-quote").href = twitterLink;
    document.getElementById("text").innerText = randomQuoteData.quote;
    document.getElementById("author").innerText = randomQuoteData.author;
}

所做的更改：

• 使用了

  encodeURIComponent()

  ，这是一个更全面的函数来对字符串进行 URL 编码。

• 通过用空格分隔引用和作者来正确连接推文的文本。

尝试一下，看看它是否能解决您的问题！