How can I replace blank extra spaces (not white-spaces) with '-'?

Question

I have string like this:

var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

The sentence will be displayed in the left flat html format, like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How I can substitute any remaining extra blank space at the end of the line to negative (-) characters using JavaScript which makes the sentence become aligned justified so I get results like this?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore- eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia-------- deserunt mollit anim id est laborum.-----------------------------------------------------------------------------------

The output should be something like this output

The original formatting of the report MUST be retained, so changing it is not allowed

I tried to achieve that using this code jsfiddle

var html = content.split(" ");
var htmlTmp = "";
var result = "";
var limitlength = 40;
var linelength = 50;

for(var i=0; i< html.length; i++) {    
    var htmlTmp_length = htmlTmp.length;
    if(htmlTmp_length > limitlength) {
        result += html[i] + " ";

        if(htmlTmp_length < linelength) {
            for(j=0;j<(linelength - htmlTmp_length);j++) {
                result += "-";
            }
        }

        result += "<br/>";
        htmlTmp = "";                                        
    }
    else {
        result += html[i] + " ";
        htmlTmp += html[i] + " ";
    }    
}

$(".content2").html(result);

but it does not seem to work, as each letter takes up different space.

If all you want to do is to force justify alignment at the end line, you may use the CSS text-align: justify; text-align-last: justify; white-space: pre — minmaxavg
You'll probably need to use a regular expression to select and replace multiple whitespace characters. Please make an effort and return with a more specific question. — isherwood

minmaxavg minmaxavg · Accepted Answer · 2015-01-13T17:29:58

Is this what you need?

var LIMIT = 1<<16;
function twTexts (target, content, delim, cw, noOverflow) {
    // Split text into delim
    var array = content.split(delim);
    var span = $("<span></span>");
    target.append(span);
    var loopCount = 0;
    for (var i = 0; loopCount++ < LIMIT && i < array.length; i++) {
        if (i > 0) span.append(delim);
        span.append(array[i]);
        if ((noOverflow && span.width() > target.width()) || span.height() > cw) {
            // Line break caused by this word.
            var text = array.slice(0, i).join(delim);
            span.text(text);
            if (i != 0) {
                // Add '-' until the line breaks
                for (;span.height() <= cw && span.width() <= target.width(); text += '-')
                    span.append('-');
                span.text(text.substring(0, text.length - 1));
                span.append("<br>");
                array = array.slice(i);
            } else {
                // Oops. The line break has happened because of the first word!
                if (array[0].length > 1) {
                    // Let's just break this into characters
                    console.log("Called twTexts");
                    twTexts (target, array[0], '', cw, noOverflow);
                } else {
                    // Ooops. the container's width is narrow than characters. just append this one.
                    span.text (array[0]);
                }
                array = array.slice(i + 1);
            }
            // Start new line
            span = $("<span></span>");
            target.append(span);
            i = -1;
        } else if (i + 1 >= array.length) {
            // No line break occured and this is the last word.
            text = array.join(delim);
            for (;span.height() <= cw && span.width() <= target.width(); text += '-')
                span.append('-');
            span.text(text.substring(0, text.length - 1));
            span.append("<br>");
            break;
        }
    }
}

var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.fsdfsfdfsfsffaddfadf";

// The target
$(".target").each(function (i, e) {
    var target = $(e).empty();

    // Calculate the height of a character
    var span = $("<span>A</span>");
    target.append(span);
    var cw = span.height();
    span.remove();

    // Print text
    twTexts (target, content, ' ', cw, true);
});

JSFiddle : http://jsfiddle.net/wnalfl3737/nkf3ob55/6/

How can I replace blank extra spaces (not white-spaces) with '-'?

1 Answers