Jquery - Reverse text in div by line

user2194805
December 31, 2023
227 views
0 votes
2 Answers

I’d like to have the text reversed in a div for each line. So, for instance if the given text is:

apple orange banana
potato salad carrot
abcd efgh ijkl

I’d like to get:

ananab egnaro elppa
torrac dalas otatop
lkji hgfe dcba

Reversing the whole text won’t work as it would flip also the top-down order of the text. So, all I want to achieve is to be able to read the text from right to left.

Is there any easy javascript / jquery solution for this?

style="direction: rtl"

is not a solution, I still need to read from left to right.

Thanks.

Answers

An easy way to do it:

$(document).ready(function() {
  // Select each div inside the container
  $("#textContainer div").each(function() {
    // Get the text content of the div
    var text = $(this).text();

    // Reverse the text
    var reversedText = text.split('').reverse().join('');

    // Set the reversed text back to the div
    $(this).text(reversedText);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="textContainer">
  <div>apple orange banana</div>
  <div>potato salad carrot</div>
  <div>abcd efgh ijkl</div>
</div>

Clone the div, transform words to spans and split the text to lines.
Watch for the div resized and repeat the process (if needed).
To make lines stables wrap them in DIVs or add spaces (more complex).

const div = document.createElement('div');
div.style = $text.style.cssText;

const words = $text.textContent.match(/S+/g);

div.innerHTML = words.map(word => `<span>${word}</span>`).join(' '); 

const resizer = new ResizeObserver(resize);
resizer.observe($text);

function resize(){
  document.body.appendChild(div);
  div.style.width = $text.offsetWidth + 'px';
  let top, line = [];
  const lines = [];

  [...div.children].forEach((span, idx) => {
    const spanTop = span.getBoundingClientRect().top;
    top ??= spanTop;
    if(spanTop > top){
      top = spanTop;
      lines.push(line);
      line = [words[idx]];
    } else line.push(words[idx]);
  });

  line.length && lines.push(line);
  $text.innerHTML = lines.map(line => '<div>' +  [...line.join(' ')].reverse().join('') + '</div>').join(' ');
  div.remove();
}

<div id="$text" style="width:100px;border: 1px solid gray;box-sizing: border-box;">
apple orange banana
potato salad carrot
abcd efgh ijkl
</div>
<label onclick="$text.style.width = '50px'"><input name="width" type="radio"  >50px</label>
<label onclick="$text.style.width = '100px'"><input name="width" type="radio" checked >100px</label>
<label onclick="$text.style.width = '150px'"><input name="width" type="radio"  >150px</label>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Reverse text in div by line

Answers