Question

我想创建一个包含以下内容的段落：名称，费用（例如＆＃34; 3.66 $＆＃34;）。但问题是我想用点填充空间（＆＃34; ......＆＃34;）而我不知道如何。我从数据库中获取值（名称和成本），每个名称都不同，所以我无法想到让空间充满点的方式。例如，行：

"apple                        20.58$"

"banana and ice cream          4.99$"

需要：

"apple ...................... 20.58$"

"banana and ice cream ........ 4.99$"

这是代码：

for (var i = 0; i < data.d.length; i++) {
    $(document).ready(function () {
        $("#ShowMenu").append(
            "<p style='text-align: left;margin: 0px;'>" +
                "<span style='font-size: large;font-weight: bold;float:left;'>" + data.d[i].title + "</span>" +
                "<span style='float:right;'>" + data.d[i].cost + "</span>" +
            "</p>"
        );
    });
}

Answer 1

如果要替换值（而不是正则表达式），则只替换该值的第一个实例将被替换。替换所有出现指定值时，使用global（g）修饰符（参见 “更多例子”。）

Souce

问题是replace替换了第一个找到的事件。你可以这样做：

function replaceAll(input, what, withWhat) {
    while (input.indexOf(what) !== 0) {
        input = input.replace(what, withWhat);
    }
    return input;
}

但这不是高效而不优雅。要改进它，您需要使用正则表达式：

function replaceAll(input, what, withWhat) {
    return input.replace(new RegExp(what, 'g'), withWhat);
}

并致电replaceAll。如果你想让它更通用，你可以这样做：

String.prototype.replaceAll = replaceAll;

编辑：

上面的答案来自假设文本是由Javascript生成的。从评论部分和问题编辑可以看出，我的假设是错误的。实际情况是空格出现是因为CSS样式与float。

一种可能的解决方案是创建一个点字符的图像和另一个具有所需其他内容背景的图像。将段落的背景图像设置为带有重复的点图像，将跨度的背景图像设置为彩色图像。

另一种可能的解决方案是不使用float，而是使用javascript写点，直到宽度为所需宽度。这涉及标签测量并且速度很慢。

Answer 2

你可以使用这样的功能：

function getReceiptItem(name, cost, maxLength) {
  var dotsLength = maxLength - name.length - cost.length - '$'.length;

  if (dotsLength < 0) {
    name = name.substring(0, name.length + dotsLength);
    dotsLength = 0;
  }

  return name + Array(dotsLength).join('.') + cost + '$';
}

Full example

不要忘记设置monospace字体以便接收，例如：

* {
  font-family: 'monospace';
}

如何用内容填充段落？

2 个答案: