本文介绍一种简洁可靠的 JavaScript（含 jQuery）方案，用于对多个 div 中的文本进行按行独立反转——即每行字符顺序倒置，但行序保持不变，满足从左到右阅读、单行内从右向左拼写的特殊排版需求。
本文介绍一种简洁可靠的 javascript（含 jquery）方案，用于对多个 div 中的文本进行**按行独立反转**——即每行字符顺序倒置，但行序保持不变，满足从左到右阅读、单行内从右向左拼写的特殊排版需求。
在网页开发中，有时需要实现“镜像式”文本效果：每行文字本身被完全反转（如 "apple" → "elppa"），但各行之间的上下顺序不能改变，也不能依赖 CSS 的 direction: rtl 或 unicode-bidi，因为这些仅影响渲染方向，不改变实际字符串结构，且会导致光标行为、选中文本顺序等不符合预期。
下面是一个轻量、可复用的 jQuery 解决方案：
<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>
<script>
$(document).ready(function() {
$("#textContainer div").each(function() {
const originalText = $(this).text();
const reversedText = originalText.split('').reverse().join('');
$(this).text(reversedText);
});
});
</script>
该脚本会遍历 #textContainer 下所有
元素，对每个元素的纯文本内容执行三步操作：
- 提取文本：使用 .text() 获取不含 HTML 标签的原始字符串；
- 逐字符反转：.split('') 将字符串转为字符数组，.reverse() 倒序排列，.join('') 拼接回字符串；
- 写回 DOM：用 .text(reversedText) 安全替换原内容（自动转义，防止 XSS）。
✅ 优势说明：
- 严格按行处理，不跨行混淆，保留原有 结构与行间距；
- 不依赖 CSS 方向属性，反转结果是真实的字符串变更，支持复制、搜索、无障碍读取；
- 兼容多空格与英文单词边界（空格作为普通字符参与反转，自然形成 "ananab egnaro elppa" 效果）。
⚠️ 注意事项：
- 若 div 内含 HTML 标签（如 text），.text() 会忽略标签仅提取文本；如需保留结构并反转标签内文本，请改用 .contents() 遍历文本节点，或使用更复杂的 DOM 操作；
- 中文、Unicode 字符（如 emoji）均可正常反转，因 .split('') 在现代浏览器中已正确支持 UTF-16 代理对；
- 纯 JavaScript 版本（无需 jQuery）可替换为：
document.querySelectorAll('#textContainer div').forEach(el => { el.textContent = [...el.textContent].reverse().join(''); });
此方法精准满足“每行独立反转字符序列”的核心诉求，代码简短、语义清晰、易于集成到现有项目中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
