如何使用 javascript/jquery 更改每行文本的文本方向？答案

【问题标题】：How to change text direction of every line of text using javascript/jquery?如何使用 javascript/jquery 更改每行文本的文本方向？
【发布时间】：2016-11-03 11:15:06
【问题描述】：

谁能帮助更改每一行的文本方向。 示例如下：

text left-to-right
text right-to-left
text left-to-right
text right-to-left... etc.

在每个word-wrap: break-word 上，我都需要更改文本方向。请帮忙！它可以是 jquery 或 javascript 代码。

下面的示例，但它是由 css 和段落组成的。我需要在没有段落的情况下更改文本方向，或者在自动换行时更改为一个段落。

不幸的是，我不知道如何制作这个，真的......

.ltr {
  direction: ltr;
  }
.rtl {
  direction: rtl;
  }

<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>

【问题讨论】：

你能发布一个更好的例子来说明你到底想要什么。请告诉我们你尝试了什么？
在 jsfiddle 上添加了可视化示例
您应该使用正则表达式选择每一行文本并将其动态设置为p标签，然后更改每个p的方向。如果您想使用此解决方案，我发布了答案。
您将无法使用 css word-wrap:break-word 执行此操作 - 您可以通过 javascript 应用自动换行（可能有一个插件），这可以让您控制/反馈换行符的位置是。

标签： javascript jquery html css text

【解决方案1】：

您可以通过正则表达式选择每一行文本，并使用String.prototype.replace() 将其设置在p 标签中。现在你可以通过改变相关p的CSS来改变每一行的方向。

$("div").html(function(i, text){
    return text.replace(/(.+\n?)/g, "<p>$1</p>");
});

$("div").html(function(i, text){
  return text.replace(/(.+\n?)/g, "<p>$1</p>");
});

div > p:nth-child(odd){
   direction: ltr;
}
div > p:nth-child(even){
   direction: rtl;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
text left-to-right
text right-to-left
text left-to-right
text right-to-left... etc.
</div>

【讨论】：