如何用JavaScript/jQuery实现Div内文本逐行反转？

需求说明 #

需要将Div内的文本逐行单独反转每个单词，同时保持行的上下顺序不变，整体阅读方向仍为从左到右。不能直接整体反转文本（会颠倒行顺序），也不能使用direction: rtl样式（无法实现单词级反转）。

原生JavaScript解决方案 #

适用于纯文本换行（通过\n分隔行）的Div：

// 获取目标Div
const targetDiv = document.getElementById('target-div');
// 拆分文本为行数组
const lines = targetDiv.textContent.split('\n');
// 逐行处理：反转每个单词后重新拼接
const reversedContent = lines.map(line => 
  line.split(' ')
      .map(word => word.split('').reverse().join(''))
      .join(' ')
).join('\n');
// 更新Div内容
targetDiv.textContent = reversedContent;

如果Div内的换行是通过<br>标签实现的，调整如下：

const targetDiv = document.getElementById('target-div');
// 先将<br>替换为换行符统一处理
const rawText = targetDiv.innerHTML.replace(/<br\s*\/?>/gi, '\n');
const lines = rawText.split('\n');
const reversedContent = lines.map(line => 
  line.split(' ')
      .map(word => word.split('').reverse().join(''))
      .join(' ')
).join('<br>');
// 换回<br>标签更新内容
targetDiv.innerHTML = reversedContent;

jQuery解决方案 #

纯文本换行场景：

$('#target-div').text(function(_, originalText) {
  return originalText.split('\n').map(line => 
    line.split(' ')
        .map(word => word.split('').reverse().join(''))
        .join(' ')
  ).join('\n');
});

<br>换行场景：

$('#target-div').html(function(_, originalHtml) {
  // 替换<br>为换行符
  const rawText = originalHtml.replace(/<br\s*\/?>/gi, '\n');
  // 处理后换回<br>
  return rawText.split('\n').map(line => 
    line.split(' ')
        .map(word => word.split('').reverse().join(''))
        .join(' ')
  ).join('<br>');
});

内容的提问来源于stack exchange，提问作者user2194805