前端编码中快速填充内容--乱数假文

于 2023-12-06 22:39:46 发布
阅读量803 收藏 7
点赞数 9
分类专栏： 其他 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42703239/article/details/134842837
版权

写前端页面的时候，如果要快速插入图片，可以使用 https://picsum.photos/ 

详见笔者这篇博文：

工具网站：随机生成图片的网站-CSDN博客

可是，如果要快速填充文字内容该怎么做呢？

以前，我们都是写“实例文字”。如，要在一个div里填充文本，我们可能会这样写。

<div>
实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字
</div>

这种方式虽然方便，但是文字效果看上去还是太单调了，而且如果对文字字数有要求，还要考虑文字的个数。

不过，有了 VSCode 之类的编辑器，就方便多了，可以快速填充文本，即使用“乱数假文”。

乱数假文，是指一篇常用于排版设计领域的
文章。主要的目的为测试文章或文字在不同字型、版型下看起来的效果。

其文本没有任何实际的意义，就是为了看排版效果的。

在代码里使用乱数假文很简单，在VScode、webstorm、HBuilder之类的现代编辑器中，直接输入 lorem 或者 lorem<字数> 按下 tab 或者 enter，即可快速生成文本。

lorem

生成的文本效果：
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae vitae libero dolor odit dicta debitis ullam corrupti iure? Distinctio ab velit sunt accusamus incidunt deleniti in quod blanditiis nesciunt earum?
lorem20

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora ratione odit earum, similique repellat fugit aperiam. Officiis aspernatur voluptas sunt.

如果要输入中文的乱数假文呢？

在VScode里，可以安装中文假文插件 Chinese Lorem。

输入 jw 或者 jw<数字> 即可快速生成中文假文。

jw

明同是人者皇陀非语国馆见的丰藏王落志，之了上后是有有才非韩以会融也也未，能守不普，绝一低乐那疾承憾远但是嗣惊的是力韩，台承快拆可事日尝足都德，有王司了洞即，未人感，龄想高君词嗣召王联介厄法，二三而准们但不，拾老得小作在喜你服量，生区他活认有洪订逝问未，我。
jw20

谭绪恶羊派弟，秦令着准尝，风有若玉死们。

感觉是不是填充网页内容方便多了？？？

stones4zd
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Geo-complete-for-digital-matatus:数字matatus前端
06-06
$.geocomplete() - 版本 1.6.5jQuery 地理编码和地点自动完成插件一个高级 jQuery 插件，它封装了 Google Maps API 的 和服务。 您只需提供一个输入，让您可以使用漂亮的自动完成下拉菜单搜索位置。 （可选）添加一...
bright-events:BrightEvents使您的事件更明亮
05-23
您可以使用预先填充的帐户登录： email: john.doe@example.com password: Qw1ITlgILwyWgfWbPhK9vNeVofGKnDC8 技术说明 使用Ruby on Rails构建的后端 使用devise进行身份验证 用Javascript编写的前端交互 使用...
[记录]乱数假文生成器的制作过程.
anguai6160的博客
05-16 1256
我的乱数假文生成器已经正式发布了访问地址为:http://bugunow.com/lipsum起因… 前两天在为系的网站设计样式稿,当我觉得页面太空了想要塞点文字的时候,花了不少时间找素材.这时候我想到当初我在一位台胞的博客上看到一篇有关假文的生成工具(具体我已经不记得网址了),于是我翻山越岭的找啊,找到了没有中文的LoremIpsum和只有繁体中文的乱数假文生成器.或许我不知道它...
【Vscode】快速生成用于排版效果测试的随机文本
XavierJ的博客
03-20 3843
引言 Vscode 中编写 HTML 时，输入 lorem 可自动生成“乱数假文”，即乱序的并没有实际含义的文本，但可提高排版测试的效率。 但 Vscode 自带的 lorem 仅支持 HTML 文件，不支持其它格式的文件，比如 Markdown 等。 因此，这里推荐 Vscode 中两款用于生成“乱数假文”的插件，一个用于英文，另一个是中文的。 插件 Lorem ipsum 拓展中心搜索该插件名称并安装。Ctrl+Shift+P 调出控制台。 Lorem Ipsum: Insert a line（插.
乱数假文，好用的随机填充字符
weixin_53936264的博客
03-07 93
一个比较好用的随机字符串，在进行一些数据模拟的情况下有一些用处
Lorem ipsum乱数假文学习笔记
qq_44665162的博客
07-19 2192
Lorem ipsum，简称为Lipsum，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。中文的类似用法则称为乱数假文、随机假文。[1] [1]https://zh.wikipedia.org/wiki/Lorem_ipsum(access ...
html中随机生成假文
远方
12-08 3854
输入Lorem按tab键
1st-Challenge:第一届前端导师挑战赛
04-12
前端导师挑战可帮助您构建现实的项目，从而提高您的编码技能。目录概述挑战用户应该能够： 根据设备的屏幕尺寸查看最佳布局请参阅悬停状态以获取交互元素截屏 链接解决方案URL：实时URL 我的过程 内置语义HTML5标记...
coal-tracker-client:仅前端重建 Coal Tracker 应用程序
07-24
客户端提供了一个硬编码的公司列表，我们用它来填充“公司搜索”。 要更新，只需将列表保存为data/companies.txt 。 其他详细信息： documentation\update-companies-list.md 追踪器 燃煤电厂本身由客户管理。 导出...
senior-frontend-test:狗与小马工作室高级前端
05-09
从数据源（JSON或硬编码数组）填充办公室清单 重新创建以下交互 切换打开/关闭办公卡 “添加新位置”（将新办公室添加到列表中） “编辑办公室”（编辑并保存办公室数据） 在添加或编辑办公室时，应禁用“保存”...
乱数假文生成器
WP8HUB
06-12 2281
乱数假文，英文又称“Lorem ipsum”，是指一篇常用于排版设计领域的文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果，通常网站还没建设好时会出现这段文字。 乱数假文生成器用来生成一篇用于排版设计领域的随机文章，支持生成英文、简体中文、繁体中文的乱数假文。 乱数假文相关介绍 Lorem ipsum从西元15世纪开始就被广泛地使用在西方的印刷、设计领域中，在电脑排版盛行之后，这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头..
使用lorem在HTML中生成随机文本
justforuse的博客
08-02 1万+
偶然知道这个功能，即自动生成随机文本。使用方法lorem + 单词数量示例（VS Code中）：俗称乱数假文，本是用于排版领域用来测试不同文本下的显示状态，可以参考百科使用这个功能可以帮助我们生成随机文本，省的复制n多个hello world了。
vscode 使用技巧与设置
qq_38349067的博客
12-19 593
1、缩进与反缩进 选中后用键盘上的tap键（q键的左侧）和shift+tybe键，分别可以实现缩进与反缩进。 2、乱数假文：没有任何实际含义的文字。 经常需要一段长度不等的文字来调试时，可以使用乱数假文。在vscode安装了emmet插件后，可以快速生成。 p*6>lorem + tap键 可以生成六段长度不同的p元素乱数假文。 p*6>lorem1 + ta...
论文中的三线表及表格规范
热门推荐
九天翔龙的技术博客
05-30 23万+
按照《中华人民共和国国家标准GB/T 7713.1—2006》即《学位论文编写规则》要求，表的编排建议采用国际通行的三线表。 我们学校也从2022届论文开始，也要求论文里采用三线表。很多同学对三线表不熟悉，故而参考各种文献，写下此文。个人见解，如有错误，请批评指正。 一、论文中表格及其分类 1. 表格 论文中的表格一般由表号、表题、表头、表身和表注构成。 表头可以分为横表头与竖表头。 表格线一般由顶线、底线、墙线、栏线、行线、表头线等6种线组成。 2. 表格的分类 全线表 当表
程序开发类本科论文结构【2024年修改】
九天翔龙的技术博客
02-19 2万+
带论文，很多同学都不知道怎么写，连结构都搞不清楚。写个博文吧，方便同学们看，以后指导也方便，不用口舌去挨个讲，节约口水。 根据本专业的特色，主要是以软件（网站，游戏，前端）开发为主，我就以这为前提来做论文结构，文科类的请参考其他文章，不过一些基本的思路可以采纳。 先声明：本人水平有限，所写内容采纳了各路大神的文章思路，并加以自己的想法和思考，仅供参考。 一、软件（网站，游戏）开发论文可以参考...
如何调整Typora中的图片大小
九天翔龙的技术博客
08-08 1万+
今天用Typora 记笔记。 插入了一个图片。挖槽了呢，图片默认宽度 100%。太大了。 直接使用 菜单栏的插入图片就是个坑~！ 好在 MD 文件本身就是基于HTML的。 可以直接使用 img 标签：<img src=“url” /> url中填写图片的路径 这样就可以更改图片样式了 比如： <img src=“url” width="200" height ...
电脑使用小常识（7）：Word如何批量修改题注
九天翔龙的技术博客
08-18 1万+
写论文或者其它文章，难免用到图或表的题注，如“表2-1 某某某表”、“图3.1 某某某图”之类的。这两天在修改我的一个稿子，突然同事让我调整下章节序号。这也意味着我的图和表的题注也要修改，涉及的图表数量至少上百个。一般人的话，估计都亚麻呆住了。还好我聪明，自有妙招。...
论文中的参考文献规范
九天翔龙的技术博客
12-19 1万+
每年都有毕业班的同学要完成论文，但是很多同学对参考文献的格式都弄不清楚，没有几个把参考文献写规范了的。参考文献格式乱的，不致命。但是，对于精益求精的一些老师来说，也是让人受不了。所以，做好参考文献格式也很重要。
crypto-js 文件加密
最新发布
08-04
引用[1]中提到了使用crypto-js库进行加密的方法。具体来说，可以使用AES加密算法对数据进行加密。在加密过程中，需要提供一个AES密钥(AESKey)和待加密的数据(value)。加密的过程包括以下几个步骤： 1. 将AES密钥转换为UTF-8编码的格式。 2. 根据AES密钥的前16位生成一个偏移量(iv)。 3. 将待加密的数据转换为UTF-8编码的格式。 4. 使用AES算法和指定的加密模式(ECB)、填充方式(Pkcs7)对数据进行加密。 5. 将加密后的数据转换为Base64字符串并返回。 具体的加密方法如下： ```javascript const encryption = (value: string, AESKey: string) => { let key = CryptoJS.enc.Utf8.parse(AESKey); let iv = CryptoJS.enc.Utf8.parse(AESKey.substr(0, 16)); let srcs = CryptoJS.enc.Utf8.parse(value); let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); return CryptoJS.enc.Base64.stringify(encrypted.ciphertext); } ``` 引用[2]中提到了使用crypto-js库进行解密的方法。解密的过程与加密相反，需要提供AES密钥(AESKey)和待解密的数据(value)。解密的过程包括以下几个步骤： 1. 将AES密钥转换为UTF-8编码的格式。 2. 根据AES密钥的前16位生成一个偏移量(iv)。 3. 使用AES算法和指定的解密模式(ECB)、填充方式(Pkcs7)对数据进行解密。 4. 将解密后的数据转换为UTF-8编码的格式并返回。 具体的解密方法如下： ```javascript const decryption = (value: string, AESKey: string) => { const key = CryptoJS.enc.Utf8.parse(AESKey); let iv = CryptoJS.enc.Utf8.parse(AESKey.substr(0, 16)); const decrypt = CryptoJS.AES.decrypt(value, key, { iv: iv, mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); return CryptoJS.enc.Utf8.stringify(decrypt).toString(); } ``` 引用[3]中提到了crypto-js库的简介。crypto-js是一个纯JavaScript的加密算法类库，可以方便地在前端进行各种加解密操作。它支持的算法包括MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。使用时可以引入整个crypto-js库，也可以单独引入需要使用的算法文件。 你可以通过以下方式下载和使用crypto-js库： 1. 下载地址：https://github.com/brix/crypto-js/releases 2. 引入crypto-js.js文件： ```html <script src="crypto-js.js"></script> ``` 综上所述，你可以使用crypto-js库进行文件加密操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值