網頁 HTML 中的隨機文字來自一份經過挑選的英文單字清單,小型腳本會依需求從中抽取,並注入到指定的元素中,讓訪客每次點擊按鈕或重新整理頁面時,都能看到全新的提示、名稱構想或詞彙項目。這種模式從教室的閃卡、寫作應用程式,到需要看起來不像真實文章的占位文字的教室遊戲和設計線框稿,無處不在。最簡單的版本使用瀏覽器內建的 Math.random() 函式,搭配儲存在腳本中的單字陣列;而完整管理的版本則使用像是 Random Word Generator 這樣的線上工具,組合出過濾過的清單,再貼回網頁原始碼。兩種做法解決的是同一個問題:把一塊靜態的 HTML 變成一個能依需求產生新單字、而且不需要任何伺服器程式碼的產生器。
如果您正在勾勒寫作提示工具、教室活動,或是快速的腦力激盪小工具,問題很快就會變成「到底要怎麼把單字放進網頁」。用手動複製無法規模化,而從公開的 API 拉資料則會增加網路依賴,頁面必須優雅地處理。本地陣列搭配一個小型抽取函式,能提供快速、離線的解決方案,您可以隨網頁一起發布,從任何靜態主機提供服務。當您想要更豐富的詞彙集,並加上長度篩選和詞性標記時,在線上工具中產生清單再貼到腳本中,通常是最快的途徑。
頁面上需要準備的東西
在純 HTML 中運作的隨機單字小工具需要三個部分:顯示每個單字的位置、觸發新抽取的按鈕,以及保存單字清單和抽取邏輯的簡短腳本。顯示區域通常是 heading、段落或有序清單,取決於您想顯示幾個單字。按鈕可以是普通的 <button>,搭配 id,讓腳本可以透過 addEventListener 掛載事件。腳本位於 body 結尾的 <script> 區塊中,或放在獨立的 .js 檔案,而單字陣列是這個專案唯一真正依賴的資料。
最小範例在概念上看起來像這樣:
- 容器:一個帶有
id="wordOut"的<p>,用來顯示目前的單字。 - 觸發器:一個
<button id="newWord">,用來呼叫抽取函式。 - 腳本:一個單字陣列,以及一個從中挑選並寫入容器的函式。
單字清單的大小可以依用途調整。二十到三十個單字就足以應付基本的教室遊戲,而一千個以上則會開始像是寫作提示工具真正可用的詞彙來源。如果您不想手動挑選清單,線上產生器就是務實的捷徑。
產生您要貼上的單字清單
開啟 Random Word Generator,選擇您想要的單字數量,每次抽取從 1 到 50 個。設定符合您用途的篩選條件:用長度區間保留遊戲用的短單字或詞彙練習的長單字;如果您的頁面只需要名詞或動詞,可以加上詞性標記;也可以用起始字母來圍繞某個主題抽取,例如「C」開頭的城市主題活動。點擊 Generate 抽取新的一批,每次點擊都會重新洗牌,並跳過目前這一組已經出現過的單字,所以同一批抽取中絕不會看到重複。
當清單看起來滿意時,使用 Copy 按鈕以每行一個單字的方式複製。這種格式可以直接放進 JavaScript 陣列:用方括號包起來,每一行結尾加上逗號,含有撇號的單字在雙引號字串內用單引號包起來(反之亦然)。對於大多數一般的英文單字清單來說,每個項目加上單引號就夠了。
把隨機單字接到 HTML 中
- 開啟您的 HTML 檔案,在 body 頂部附近加入顯示元素,例如
<p id="wordOut">Click the button for a word</p>。 - 在顯示元素下方加入按鈕,例如
<button id="newWord">New word</button>,讓訪客有明確的控制項來觸發新的抽取。 - 在 body 結尾建立一個 script 區塊,把您的單字清單以 JavaScript 陣列形式貼上,例如
const words = ["apple", "river", "mirror", "violin", "compass"];。 - 在同一個 script 中,撰寫一個
drawWord函式,使用Math.floor(Math.random() * words.length)來挑選隨機索引,然後用document.getElementById("wordOut").textContent = words[i];把結果寫入顯示元素。 - 用
document.getElementById("newWord").addEventListener("click", drawWord);把函式掛到按鈕上,這樣每次點擊都會產生新單字。 - 儲存檔案並用瀏覽器開啟,然後多次點擊按鈕,確認每次抽取都會回傳單字,而且頁面不會拋出錯誤。
同樣的模式可以延伸到一次顯示多個單字。新增一個 <ul id="wordList"></ul> 容器,依使用者選擇的數量迴圈跑過陣列,每次抽取都附加一個新的 <li>,並先用 innerHTML = "" 清空清單,讓舊的單字消失。因為產生器在同一次抽取中不會重複陣列內的單字,當您把完整的一組複製到腳本並用洗牌方式不重複地迭代時,頁面也會繼承相同的特性。
在頁面內依長度和類型篩選單字
基礎功能運作後,下一步的改良就是篩選。許多寫作和遊戲提示受益於短單字(三到五個字母)或長單字(八個字母以上),這樣難度才能保持一致。在頁面內做篩選最乾淨的方式是:為每個單字儲存額外的詮釋資料,並讓抽取函式在回傳符合項目之前先檢查它。
| 篩選條件 | 使用情境 | 在程式碼中如何表示 |
|---|---|---|
| 短單字(3 到 5 個字母) | 快速詞彙遊戲、初學者閃卡 | 在接受抽取前檢查 word.length >= 3 && word.length <= 5。 |
| 長單字(8 個字母以上) | 進階拼字比賽、創意寫作提示 | 檢查 word.length >= 8,並在找到符合項目之前捨棄較短的抽取。 |
| 詞性(僅名詞) | 需要具體形象單字的故事開場 | 為每個項目標記為 { w: "river", p: "noun" },然後以 p === "noun" 篩選。 |
| 起始字母 | 頭韻練習、字母暖身活動 | 在接受抽取前檢查 word[0].toLowerCase() === "c"。 |
當篩選條件太嚴格時,抽取函式可以迴圈跑固定的次數,並退而求其次使用陣列中的任何單字,這樣頁面就不會因為不可能的限制而卡住。一個小型的重試計數器(例如二十次嘗試),就足以維持頁面的回應速度,又不會悄悄扭曲篩選過的詞彙池。
您會重複使用的常見模式
實際應用中,大多數的隨機單字小工具都是一小組模式的變化,辨識出它們能讓您在閱讀別人的程式碼時節省時間。單字模式只使用一個變數和一個 DOM 節點。清單模式會清空容器,再用迴圈重新填入。加權模式為每個單字儲存難度評分,並透過 Math.random() 對照累積門檻值,讓抽取偏向較簡單或較難的項目。不重複模式則用簡單的交換迴圈把陣列的副本洗牌,然後依序走過,提供保證不重複的序列,直到陣列用盡,此時腳本會重新洗牌再開始。
對教室或腦力激盪工具來說,不重複模式通常最友善,因為參與者在同一場活動中絕不會看到相同的單字兩次。對於想要熵值而非唯一性的密碼風格產生器,使用長陣列的單字模式更合適,因為抽取之間彼此獨立。一開始就選好模式,能讓腳本保持簡短且可預測。
什麼時候線上工具是更好的第一步
手動輸入一千個單字的清單很少是下午時間的最佳利用方式。用篩選條件產生一批,再把結果貼到腳本中,讓您可以反覆調整頁面,完全不用翻字典。同樣的工作流程也適用於相關任務:如果您想要一段用于線框稿的占位文字,Lorem Ipsum Generator 以相同的一行一個項目的格式提供標準的填充文字,可以直接放進 JavaScript 陣列;如果您只是為了快速展示需要一個洗牌過的單字,產生器內的隨機抽取本身就夠了。當您有了詞彙池,還需要更廣泛的清單洗牌任務時,List Randomizer 會公平地重新排列任何貼上的區塊,而不會更動內容。
如果您想超越單一頁面,比較在試算表中挑選單字的方法,How to Generate Random Words in Excel 和 How to Generate Random Text Word Lists Online 這兩份指南會用具體的公式和螢幕截圖,帶您走過活頁簿和瀏覽器的做法。若想從更高的角度檢視隨機英文單字在寫作工具和遊戲中的各種用途,How to Generate Random Words Online for Any Purpose 這份指南整理了最常見的用法以及各自的權衡取捨。
整合起來
HTML 中一個自給自足的隨機單字小工具,是最能帶進其他專案重複使用的程式碼片段之一。一旦有了可運作的版本,同一個抽取函式可以接到閃卡應用、密碼提示、故事開場、教室暖身活動,以及用於模型稿的占位文字。基礎架構很小:一個陣列、一個按鈕、一個容器和一個抽取函式。真正有趣的變化在於篩選條件,以及您為每個項目標記的詮釋資料,而這正是像線上 Random Word Generator 這類工具發揮價值的地方,因為它們讓您在把篩選過的詞彙池提交到腳本之前,能先快速試聽效果。從那裡開始,把清單複製回頁面只是把每一行加上引號和結尾逗號、儲存檔案、重新整理瀏覽器而已。