javascript - 如何在纯 JavaScript 子字符串方法中处理双向文本和数字？

Question

我试图从输入元素中获取部分文本，具体取决于用户单击的位置，但如果我在 1 和 0 之间单击，结果是错误的“שלום 1”，它应该是“שלום 0”。
我尝试添加 CSS "unicode-bidi: plaintext;"到输入元素。
它无助于解决问题。

var myInput = document.getElementById("myInput")
myInput.value = "שלום 10 hello";

alert("Needs to be: 'שלום 0' \n Result '"+myInput.value.substring( 0, 6 )+"'")

function mouseUp(){
 alert("Result '"+myInput.value.substring( 0, myInput.selectionStart )+"'")
}
myInput.addEventListener("mouseup", mouseUp);

<input id="myInput" style="direction: rtl;unicode-bidi: plaintext;">

Answer 1

感谢Bergi，我找到了解决方案的评论:

console.log("שלום 10 hello".split("").map(c => '${c}': \\u${c.charCodeAt(0).toString(16).padStart(4,'0')}).join("\n")); might be helpful to see how the string is actually composed, without weird bidi rendering, which is what slice works on. I suspect you need to add some ltr/rtl marks.

在阅读了评论中链接的页面后，我意识到 Unicode 格式提供了两种类型的键码(LRM 和 RLM 标记)，它们在渲染时宽度为零，它们的目的是覆盖默认的方向流。
因此，当数字之前的第一个非空格相邻字符是 RTL 字符时，显式 RTL 字符会干扰数字的默认 LTR 行为。因此，当我在数字前添加 LRM 双向控制字符时，它忽略了导致问题的 RTL 方向流覆盖。
需要考虑的一件事:
我还了解到，如果 LTR 字符紧跟在数字之后(由于它们的中立性而忽略空格)，则可能需要在数字之后紧跟 RLM 控制字符，因为如果您以 RTL 字开头的句子后跟a (space, LRM, number, space, LTR word)，LRM 流程覆盖将数字和后面的 LTR 字合并到一个 LTR block 中，该 block 翻转数字和 LTR 部分的显示，因为在 LTR 之前找到了数字堵塞。所以上面描述的字符串会被渲染成这样:
数字、空格、LTR 字、空格、RTL 字，与应呈现的预期方式形成对比。
我添加了一个代码示例来演示它:

var myInput = document.getElementById("myInput"),
    Normal = document.getElementById("Normal"),
    Fixed = document.getElementById("Fixed");
    
myInput.value = "שלום 10 hello";

Normal.innerHTML = myInput.value.substring( 0, 6 );
Normal.innerHTML += '<div style="display: inline-block;"></div>';
Normal.innerHTML += myInput.value.substring( 6, 14 );

Fixed.innerHTML = 
myInput.value.replace("10",String.fromCodePoint("0x200E")+"10").substring( 0, 7 );
Fixed.innerHTML += '<div style="display: inline-block;"></div>';
Fixed.innerHTML += myInput.value.replace("10",String.fromCodePoint("0x200E")+"10"+String.fromCodePoint("0x200F")).substring( 7, 16 );

<input id="myInput" style="direction: rtl;width: 79px;">
<h3>Before the fix</h3>
<div id="Normal" style="background: #ffa0a0;width: fit-content;direction: rtl;display: inline-block;"> </div>

<h3>After the fix</h3>
<div id="Fixed" style="background: #a2ffa0;width: fit-content;direction: rtl;display: inline-block;"> </div>