javascript - 字母变换

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>