Как Обратить Order Линий

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

ОК, получил его в конце концов. Основываясь на 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 и он должен работать.

Live test case.

Answer 2

Если у вас есть разрывы строк, как этот \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 3

предупреждение, это псевдо-код:

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

лучше использовать раскол