字母轉換

Question

夥計！我有一些使用rtl轉換的代碼，但這裏的字母有錯誤的轉換（旋轉）。不知道如何完全解釋它。這很難閱讀。我希望你能理解。有人可以幫我嗎？

function wrap(element) { 
 
    var text = element.getAttribute('data-original'); 
 
    if (!text) { 
 
    text = element.textContent.trim(); 
 
    element.setAttribute('data-original', text); 
 
    } 
 

 
    var words = text.split(/\s+/); 
 
    var result = '', 
 
    line = '', 
 
    reverseLine = false; 
 
    element.innerHTML = 'a'; 
 
    var height = element.offsetHeight; 
 

 
    for (var i = 0; i < words.length; i++) { 
 
    var candidate = line + ' ' + words[i]; 
 
    element.innerHTML = result + candidate; 
 
    if (element.offsetHeight > height) { 
 
     height = element.offsetHeight; 
 
     result += '<div>' + line + '</div>'; 
 
     line = words[i]; 
 
    } else { 
 
     line = candidate; 
 
    } 
 
    } 
 
    if (line) result += '<div>' + line + '</div>'; 
 
    element.innerHTML = result; 
 
} 
 

 
function wrapAll() { 
 
    console.time('wrapAll()'); 
 
    [].forEach.call(document.querySelectorAll('.text-inverse'), wrap); 
 
    console.timeEnd('wrapAll()'); 
 
} 
 
wrapAll(); 
 
window.onresize = wrapAll;

.text-inverse div:nth-child(2n) { 
 
    direction: rtl; 
 
    unicode-bidi: bidi-override; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div class="courses"> 
 
    <h1>Header</h1> 
 
    <time class="date" datetime="2016-11-08"></time> 
 
    <p class="course text-inverse">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at cursus nisi. Morbi in quam eget quam aliquet laoreet vitae ac metus. Suspendisse nulla risus, faucibus vel lacus ac, sagittis accumsan nunc. Ut eleifend elit vitae commodo posuere. Donectincidunt, nulla vel ullamcorper tempor, nisl libero pretium tellus, eget luctus sem tellus in mi. Curabitur hendrerit urna in facilisis posuere. Ut ornare quis nibh et tincidunt. Mauris id orci a nisi lacinia eleifend sed id lectus.</p> 
 
</div>

Answer 1

你想讀的右奇數行到左，從左到右的話。

所以你需要得到每一個奇數行並扭轉單詞的順序。

如果你有奇數行的字符串：

1. 上的空白分裂和產生陣列
2. 反轉的話的字符
3. 的毗連顛倒順序串

注意：如果單詞末尾有一個點並放在起始處（所以它會出現在「結束」處），您還應該檢查。

function wrap(element) { 
 
    var text = element.getAttribute('data-original'); 
 
    if (!text) { 
 
    text = element.textContent.trim(); 
 
    element.setAttribute('data-original', text); 
 
    } 
 

 
    var words = text.split(/\s+/); 
 
    var result = '', 
 
    line = '', 
 
    reverseLine = false; 
 
    element.innerHTML = 'a'; 
 
    var height = element.offsetHeight; 
 

 
    for (var i = 0; i < words.length; i++) { 
 
    var word = words[i]; 
 
    var candidate = line + ' ' + word; 
 
    element.innerHTML = result + candidate; 
 
    if (element.offsetHeight > height) { 
 
     height = element.offsetHeight; 
 
     result += '<div>' + line + '</div>'; 
 
     line = word; 
 
    } else { 
 
     line = candidate; 
 
    } 
 
    } 
 
    if (line) result += '<div>' + line + '</div>'; 
 
    element.innerHTML = result; 
 
} 
 

 
function wrapAll() { 
 
    console.time('wrapAll()'); 
 
    [].forEach.call(document.querySelectorAll('.text-inverse'), wrap); 
 
    reverseOddLinesWithChars(); 
 
    console.timeEnd('wrapAll()'); 
 
} 
 
wrapAll(); 
 
window.onresize = wrapAll; 
 

 

 

 
function reverseOddLinesWithChars() { 
 
    var textInverseHolder = document.getElementsByClassName("text-inverse")[0].children; 
 
    
 
    for (var i = 0, length = textInverseHolder.length; i < length; i++) { 
 
    var isOddLine = i%2; 
 
    if (isOddLine) { 
 
     var currentLine = textInverseHolder[i]; 
 
     var words = currentLine.innerHTML.split(" "); 
 
     var reversedWords = reverseCharOrderOfWords(words); 
 
     
 
     currentLine.innerHTML = reversedWords.join(" "); 
 
    } 
 
    } 
 
} 
 

 
function reverseCharOrderOfWords(words) { 
 
    words.forEach(function (word, index, array) { 
 
     var newWord = word.split("").reverse().join(""); 
 
     newWord = placeDotOrCommaOnOtherSide(newWord); 
 
     words[index] = newWord; 
 
    }); 
 

 
    return words; 
 
} 
 

 
function placeDotOrCommaOnOtherSide(word) { 
 
    if (word.charAt(0) === ".") { 
 
    return returnCharOnOtherSide(word, "."); 
 
    } else if (word.charAt(0) === ",") { 
 
    return returnCharOnOtherSide(word, ","); 
 
    } 
 
    
 
    return word; 
 
} 
 

 
function returnCharOnOtherSide(word, char) { 
 
    return word.split(char)[1] + char; 
 
}

.text-inverse div:nth-child(2n) { 
 
    direction: rtl; 
 
    unicode-bidi: bidi-override; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div class="courses"> 
 
    <h1>Header</h1> 
 
    <time class="date" datetime="2016-11-08"></time> 
 
    <p class="course text-inverse">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p> 
 
</div>