練習 - 完成從輸入字串擷取、取代和移除資料的挑戰

  • 10 分鐘

程式代碼挑戰會強化學習，並協助您在繼續之前獲得一些信心。

在此挑戰中，您會使用包含 HTML 片段的字串。 您可以從 HTML 片段擷取數據、取代其部分內容，並移除其內容的其他部分，以達到所需的輸出。

如果您不熟悉 HTML 程式代碼，請檢閱本單元結尾的 「快速 HTML 入門」 一節。

從輸入字串擷取、取代和移除數據

  1. 選取並刪除 Visual Studio Code 編輯器中的所有程式代碼行。

  2. 在 Visual Studio Code 中，新增下列「入門」程序代碼，以取得挑戰的數據：

    const string input = "<div><h2>Widgets &trade;</h2><span>5000</span></div>";

string quantity = "";
string output = "";

// Your work here

Console.WriteLine(quantity);
Console.WriteLine(output);

    如果您執行程式代碼，輸出會顯示空白行，且 quantity 的起始值output是空string值。

  3. 花一分鐘的時間檢閱包含 string HTML 之 程式代碼的初始行。

    const string input = "<div><h2>Widgets &trade;</h2><span>5000</span></div>";

    請注意<div>變數中包含的標籤：<h2>、<span>、&trade;和符號代碼input。

  4. 檢查最終程式的期望輸出：

    Quantity: 5000
Output: <h2>Widgets &reg;</h2><span>5000</span>

  5. 開始將解決方案程式碼新增至註釋 // Your work here 底下的起始程式碼中。

  6. 將quantity變數設定為擷取<span>和</span>標記之間的文字所取得的值。

  7. 將 output 變數設定為 的值 input，然後移除 <div> 和 </div> 標記。

  8. 將 HTML 字元 ™ （&trade;） 取代為 ® 變數中的 &reg; （output）。

  9. 執行您的解決方案，並確認輸出符合預期的輸出。

    Quantity: 5000
Output: <h2>Widgets &reg;</h2><span>5000</span>

無論您是停滯不前，需要查看解決方案，還是您順利完成，請繼續檢視此挑戰的解決方案。

快速 HTML 入門

如果您不熟悉 HTML，它是用來建立所有網頁的標記語言。 如果您對 HTML 有很好的瞭解，請略過本節。 此信息的設計目的是提供足夠的資訊來完成這項挑戰，而不是完整的HTML 教學課程。

在 HTML 中，您會使用標記來定義文件的結構。 標記是由下列項目所組成：

  • 左角括弧 <
  • 右角括弧 >
  • 描述標記類型的文字，例如： <div>、 <span>等等 <h2> 。

每個標記都有對應的結尾標記，包含正斜線字元 /。 因此，如果您看到 <div> 應該有對應的 </div> 標籤。

開頭和結尾標記之間的內容是該標記的內容。 內容可以包含文字和其他標記。

一組標記可以內嵌在另一組標記內，並提供 HTML 檔其階層式結構。