字母转换

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>