时间戳

首页 > 解决方案 > 在使用 JS/Jquery 从 .txt 文件呈现内容时在单词之间添加空格

javascript - 在使用 JS/Jquery 从 .txt 文件呈现内容时在单词之间添加空格

问题描述

我正在尝试在 div 中显示我的 .txt 文件的内容。但是，我想在某些单词之间插入额外的空格。我知道直接使用 JS 编辑文件系统不是一个好主意。但是，有没有办法在网页中呈现单词时在单词之间添加空格。

我的 HTML：

<div id= "show-content"></div>

jQuery代码：

function readFile() {
    $.get('data.txt', function(txt) {
        console.log(txt)
        $("#show-content").load("data.txt");
     }, 'text');
}

我的文本文件（data.txt）看起来像：

Blaine Nemec
Alphonse Smither
Lon Garrick
Rob Hennings
Erin Tatham
Stefan Stacks
Allen Dang
Rolf Aultman
Jeff Christenson
Mohamed Croswell
Ambrose Mina
Rhett Jahnke

显示列表正确显示。但是，我想在每个名称后添加一些额外的空格。如果无法编辑 .txt 文件，是否可以在 CSS 或 JS/JQuery 中实现这一点。我已经搜索了几个与编辑文件相关的堆栈溢出问题，但没有一个是在 JavaScript 中并且无法帮助我。

编辑： 我试图根据字体系列在 .txt 文件中的每个名称之后添加 3 或 4 个额外的空间。

标签： javascriptjquery

解决方案

您可以使用 .split() 方法拆分 .txt 单词，然后对其进行样式化。

像这样的东西：

function readFile() {
    $.get('data.txt', function(txt) {
        console.log(txt)
        myWords = txt.split("\n");
        for (word of myWords) {
          $("#show-content").append("<span class="beautyWord">" + word + "</span>")
        }
     }, 'text');
}

然后在你的 CSS 中使用诸如 margin-left: 5px 之类的东西来风格化 beautyWord 类

推荐阅读