How to fiil paragraph with content?

Question

I want to create a paragraph that contains: name, cost (like "3.66$"). But the problem is that I want to fill the space in dots ("......") and I dont know how. I take the values (name & cost) from database and each name is diffrent so I can not think about way that makes the space be filled with dots. For instance, the rows:

"apple                        20.58$"

"banana and ice cream          4.99$"

need to be:

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

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

this is the code:

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>"
        );
    });
}

Did you try searching and trying those solutions? There are few both CSS and JavaScript http://stackoverflow.com/questions/34166734/dot-leaders-with-picture-background http://stackoverflow.com/questions/5476673/css-justify-text-fill-space-with-dots — yuriy636, Nov 20 '16 at 11:48
you could simply count the spaces between cost and name and replace them by the same number of dots — ted, Nov 20 '16 at 11:50
But I dont have any spaces. I add "float" (right to name, left to cost). — Lior Bar, Nov 20 '16 at 12:02

Lajos Arpad · Accepted Answer · 2016-11-20T12:18:48.190

If you are replacing a value (and not a regular expression), only the first instance of the value will be replaced. To replace all occurrences of a specified value, use the global (g) modifier (see "More Examples" below).

Souce.

The problem is that replace replaces the first found occurrence. You can do it like this:

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

But this is not performant and not elegant. To improve it, you need to use regular expressions:

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

and call replaceAll. If you want this to make it more general, you can do something like this:

String.prototype.replaceAll = replaceAll;

EDIT:

The answer above came from the assumption that the text is generated by Javascript. My assumption was wrong as can be seen from the comment section and the question edit. The real situation is that the spaces appear because of CSS styling with float.

A possible solution is to create an image of a dot character and another image with the desired background for the other contents. Set the background image of the paragraph to be the dot image with repeat and the background image of the span to be the colored image.

Another possible solution is not to use float, but to write the dots using javascript until the width is the desired one. This involves tag measuring and is slow.

This solution replaces the spaces with the dots? I ask because there is no spaces! I add "float" to the values. What to replace? — Lior Bar, Nov 20 '16 at 12:05
@liorbar, since you did not add your HTML code I had to guess your situation. By "float" do you mean a CSS rule to set the item to float to the right? If so, then instead of Javascript replace, you might need to set a horizontally repeating background image of a dot for your paragraph and a background image for your images with the background color to cover the dots. — Lajos Arpad, Nov 20 '16 at 12:12
I add the HTML code (I add it in JS because I take my values from database). I do not understand the solution with the image. Do you can show me an exmple, please? — Lior Bar, Nov 20 '16 at 12:18
Take a look at this image: http://www.w3schools.com/cssreF/paper.gif. Take a look at this example: http://www.w3schools.com/cssreF/tryit.asp?filename=trycss_background-repeaty — Lajos Arpad, Nov 20 '16 at 12:20

score 0 · Answer 2 · answered Nov 20 '16 at 12:19

You can use function like this:

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

Don`t forget set monospace font for receipt, like:

* {
  font-family: 'monospace';
}

How to fiil paragraph with content?

2 Answers2