Question

我在Div中有这个（文本实际上是“换行”，因为Div框的宽度很短;除非是故意的换行符）：

"Now is the time
for all good men
to come to the aid
of their country"

"The quick brown fox
jumps over the
lazy dogs"

我想这样：

lazy dogs"
jumps over the
"The quick brown fox"

of their country"
to come to the aid
for all good men
"Now is the time

我尝试过使用Reverse（）;但是没有得到预期的结果。

注意：我不是试图按照说法反转字符串，而是实际的文本行（即：句子）。

Answer 1

如果你有像\n这样的换行符，你可以执行以下操作：

var lineBreak = "\n",
    text = "Now is the time\nfor all good men\nto come to the aid\nof their country";

text = text.split(lineBreak).reverse().join(lineBreak);

如果换行符是另一个符号，请更改变量lineBreak。

Answer 2

警告，这是伪代码：

  lines=[];
  index=0;
  start=0;
  for(characters in alltext){
    if(newLine){
        lines.push(alltext.substring(start,index);
        start=index;
    }
    i++
  }      
  sortedLines=[]
  for(var i=lines.length;i>-1;i--){
     sortedLines.push(lines[i]);
     html=$('selector').html();
     html+=lines[i];
     $('selector').append(html);
  }

更好地使用拆分

Answer 3

好的，最终得到了它。基于this answer of mine，我想出了一个代码，用于识别textarea中的实际行，即使在包装时也是如此。

下一步是将div转换为textarea，以便我们可以使用上述技巧。

有了这个，使用.reverse()方法操作线条很简单。

最终代码是：

$("#btnInvert").click(function() {
    var placeholder = $("#MyPlaceholder");
    if (!placeholder.length) {
        alert("placeholder div doesn't exist");
        return false;
    }

    var oTextarea = $("<textarea></textarea>").attr("class", placeholder.attr("class")).html(placeholder.text());
    oTextarea.width(placeholder.width());

    //important to assign same font to have same wrapping
    oTextarea.css("font-family", placeholder.css("font-family"));
    oTextarea.css("font-size", placeholder.css("font-size"));
    oTextarea.css("padding", placeholder.css("padding"));

    $("body").append(oTextarea);

    //make sure we have no vertical scroll:
    var rawTextarea = oTextarea[0];
    rawTextarea.style.height =  (rawTextarea.scrollHeight + 100) + "px";

    var lines = GetActualLines(rawTextarea);
    var paragraphs = GetParagraphs(lines).reverse();
    lines = [];
    for (var i = 0; i < paragraphs.length; i++) {
        var reversedLines = paragraphs[i].reverse();
        for (var j = 0; j < reversedLines.length; j++)
            lines.push(reversedLines[j]);
        if (i < (paragraphs.length - 1))
            lines.push("");
    }
    rawTextarea.value = lines.join("\n");
    placeholder.html(rawTextarea.value.replace(new RegExp("\\n", "g"), "<br />"));
    oTextarea.remove();
});

function GetParagraphs(lines) {
    var paragraphs = [];
    var buffer = [];
    $.each(lines, function(index, item) {
        var curText = $.trim(item);
        if (curText.length === 0) {
            if (buffer.length > 0) {
                paragraphs.push(buffer);
                buffer = [];
            }
        } else {
            buffer.push(curText);
        }
    });
    if (buffer.length > 0)
        paragraphs.push(buffer);
    return paragraphs;
}

function GetActualLines(oTextarea) {
    oTextarea.setAttribute("wrap", "off");
    var strRawValue = oTextarea.value;
    oTextarea.value = "";
    var nEmptyWidth = oTextarea.scrollWidth;
    var nLastWrappingIndex = -1;
    for (var i = 0; i < strRawValue.length; i++) {
        var curChar = strRawValue.charAt(i);
        if (curChar == ' ' || curChar == '-' || curChar == '+')
            nLastWrappingIndex = i;
        oTextarea.value += curChar;
        if (oTextarea.scrollWidth > nEmptyWidth) {
            var buffer = "";
            if (nLastWrappingIndex >= 0) {
                for (var j = nLastWrappingIndex + 1; j < i; j++)
                    buffer += strRawValue.charAt(j);
                nLastWrappingIndex = -1;
            }
            buffer += curChar;
            oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
            oTextarea.value += "\n" + buffer;
        }
    }
    oTextarea.setAttribute("wrap", "");
    return oTextarea.value.split("\n");
}

只需输入div的实际ID即可。

Live test case

如何反转线的顺序

3 个答案: