如何用“-”替换多余的空格（不是空格）？

Posted 2023-02-23

【中文标题】如何用“-”替换多余的空格（不是空格）？

【英文标题】：How can I replace blank extra spaces (not white-spaces) with '-'?

【发布时间】：2015-03-11 17:49:02

【问题描述】：

我有这样的字符串：

var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 阿里夸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 偏执。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。”

句子会以左侧扁平html格式显示，像这样：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 阿里夸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 偏执。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。

如何使用 javascript 将行尾剩余的多余空格替换为负 (-) 字符，从而使句子对齐对齐，从而得到这样的结果？

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 阿里夸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 偏执。 Exceptioneur sint occaecat cupidatat non proident, sunt in 过失官方-------- deserunt mollit anim id est labourum.-------------------------------- -------------------------------------------------- -

输出应该是这样的output

必须保留报告的原始格式，因此不允许更改它

我尝试使用此代码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);

但它似乎不起作用，因为每个字母占用不同的空间。

【问题讨论】：

如果你只想在最后一行强制对齐，你可以使用 CSS text-align: justify; text-align-last: justify; white-space: pre

您可能需要使用正则表达式来选择和替换多个空白字符。请努力并返回一个更具体的问题。

OP 试图做的事情对我来说没有意义。

jQuery 适合你吗？

@all ，我已经更新了问题

【参考方案1】：

这是你需要的吗？

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/

【讨论】：

@mnmaxavg 太棒了，非常感谢，我得到了很大的帮助，你太不可思议了：D

你好@minmaxavg ..我试图在最后一句话中修复你的解决方案，但我不知道。你能再帮我一次吗..谢谢之前.. ;)

@a.fauzi 已解决。 jsfiddle.net/wnalfl3737/nkf3ob55/6 这一次它还允许您指定是否更喜欢将单词分成几部分，而不是让文本溢出容器（目标）的宽度（noOverflow 参数，布尔值）。例如，它看起来像... Lorem ipsum do lor sit amet-----

太棒了... :D 注意到您的解决方案。非常感谢minmax，你真的帮助了我。最好的问候..