Estoy tratando de obtener parte del texto de un elemento de entrada, dependiendo de dónde hizo clic el usuario, pero si hago clic entre el 1 y el 0, el resultado es incorrecto "שלום 1", debería ser "שלום 0". Intenté agregar CSS "unicode-bidi: texto sin formato;" al elemento de entrada. No ayudó a solucionar el problema.
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;">Encontré una solución gracias al comentario de Bergi :
console.log("שלום 10 hola".split("").map(c =>
'${c}': \\u${c.charCodeAt(0).toString(16).padStart(4,'0')}).unirse("\n")); podría ser útil para ver cómo se compone realmente la cadena, sin una extraña representación bidi, que es en lo que funciona slice. Sospecho que necesita agregar algunas marcas ltr/rtl .
Después de leer la página vinculada en el comentario, me di cuenta de que el formato Unicode ofrece dos tipos de códigos clave (marcas LRM y RLM) que tienen un ancho cero al renderizarse y su propósito es anular el flujo de dirección predeterminado.
Entonces, cuando el primer carácter vecino que no es un espacio, antes de un número, es un carácter RTL, los caracteres RTL explícitos interfieren con el comportamiento LTR predeterminado de los números. Entonces, cuando agregué un carácter de control bidi LRM antes del número, ignoró la anulación del flujo de dirección RTL que causó el problema.
Una cosa a tener en cuenta: también aprendí que se puede requerir un carácter de control RLM justo después del número si un carácter LTR sigue inmediatamente después del número (ignorando los espacios en blanco debido a su neutralidad) debido al hecho de que, si comienza una oración con una palabra RTL seguida de un (espacio, LRM, número, espacio, palabra LTR), la anulación del flujo LRM fusiona el número y la siguiente palabra LTR en un solo bloque LTR que cambia la visualización del número y la sección LTR desde el número se encuentra antes del bloque LTR. Entonces, la cadena descrita anteriormente se representaría así: número, espacio, palabra LTR, espacio, palabra RTL en contraste con la forma esperada en que debería representarse. Agregué un ejemplo de código para demostrarlo:
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>