lorem() 是一个纯前端、可复用的原生 JavaScript 函数，支持按词数生成单词、句子（首字母大写+标点）或段落（<p>包裹，每段5–12词），并具备参数校验、XSS防护与语义化输出能力。
用原生 JavaScript 写一个可复用的 lorem() 函数
不需要后端、不依赖框架，纯前端就能跑。核心是控制「词数」「句子结构」「段落包裹」三个维度，而不是堆砌随机字符串。
常见错误是直接拼接固定长句（比如硬写 "Lorem ipsum dolor sit amet..."），结果一调用就卡死——它没法动态变长度，也不能加标点或首字母大写。
-
lorem(20)返回 20 个单词，空格分隔，小写无标点 -
lorem(20, { sentence: true })返回一句首字母大写、末尾带句号的句子 -
lorem(3, { paragraph: true })返回 3 个<p></p>包裹的段落，每段词数随机（5–12 之间）
示例实现：
function lorem(count = 30, options = {}) {
const words = ["lorem","ipsum","dolor","sit","amet","consectetur","adipiscing","elit"];
const endings = [".", "!", "?"];
<p>if (options.sentence) {
const sentenceWords = Array.from({ length: count }, () => words[Math.floor(Math.random() <em> words.length)]);
return capitalize(sentenceWords.join(" ")) + endings[Math.floor(Math.random() </em> endings.length)];
}</p><p>if (options.paragraph) {
return Array.from({ length: count }, () => {
const paraLen = Math.floor(Math.random() * 8) + 5;
return <code><p>${lorem(paraLen)}</p></code>;
}).join("");
}</p><p>return Array.from({ length: count }, () => words[Math.floor(Math.random() * words.length)]).join(" ");
}</p><p>function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}把函数挂到 HTML 页面上并支持实时输入
用户要的是“在线生成器”，不是只在控制台跑的函数。关键在于：输入框改了，<output> 立刻更新，不刷新页面。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是直接用 document.write() ——它会清空整个页面；或者用 innerHTML = ... 却没做 XSS 过滤，万一用户输 lorem(10, { paragraph: true }) 以外的恶意参数就炸了。
- 绑定
input事件监听数字输入框，防非数字字符（如loremabc） - 用
textContent渲染纯文本结果；若需 HTML 输出（如带<p>），用insertAdjacentHTML('beforeend', ...)并确保只允许白名单标签 - 加个按钮触发，比监听每次按键更可控——避免用户输到一半就触发（比如刚敲
1就生成 1 个词）
最小可用 HTML 结构：
<input type="number" id="wordCount" value="30" min="1" max="500">
<button onclick="generate()">生成</button>
<output id="result"></output>
<p><script>
function generate() {
const n = parseInt(document.getElementById("wordCount").value) || 30;
document.getElementById("result").textContent = lorem(n);
}
</script>为什么别直接抄网上那些“完整版 loremIpsumParagraph()”函数
你搜到的很多代码（比如含 loremLang、endings 全局数组、document.write() 的版本）是为旧式静态页面写的，强行塞进现代 HTML 会出问题：
- 它们默认输出到文档流，无法嵌入到某个
<div>里，更没法和 Vue/React 组件共存 - 依赖全局变量（如
loremLang），多个脚本同时加载时容易被覆盖 - 没有容错：传入负数、
null或字符串"abc"就直接报NaN或空字符串，不给提示
真正该做的，是封装成独立作用域函数，参数校验前置，返回值明确——哪怕只是多加两行 if (isNaN(count)) return "";，就能省掉调试十分钟。
生成器上线后最常被忽略的细节
不是语法或逻辑，而是语义和体验：
- 用户复制生成的文本时，
<p>标签会被当作文本一起复制，粘贴到编辑器里变成乱码——得加个「纯文本」切换开关，或默认用textContent渲染，HTML 模式另开 tab - 移动端键盘弹出后，输入框可能被遮挡，
scrollIntoView()要加在按钮点击后，而不是 oninput 里 - Chrome 浏览器对连续快速点击按钮有默认防抖，但 Safari 不一定，加个
disabled状态防止重复提交
这些点不写进代码注释里，过两个月你自己都得重读一遍逻辑才能改。
