Estoy usando el siguiente bookmarklet para ordenar el área de texto de forma ascendente o descendente. Está funcionando como se esperaba. Pero no necesito la opción de clasificación descendente y no hay necesidad de flechas como '↑' o '↓'
No puedo extraer la función de clasificación básica de este código.
javascript: ( function() { Array.from(document.querySelectorAll('textarea')).map(function(b) { var a = document.createElement('div'); var d = document.createElement('button'); d.textContent = '↑'; d.addEventListener('click', function(f) { f.preventDefault(); b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n') }); var c = document.createElement('button'); c.textContent = '↓'; c.addEventListener('click', function(f) { f.preventDefault(); b.value = Array.from(new Set(b.value.split('\n'))).sort().reverse().join('\n') }); a.appendChild(d); a.appendChild(c); b.parentNode.insertBefore(a, b) }) } )();Cualquier ayuda será apreciada.
La mayor parte del código de bookmarklet se utiliza para crear los botones.
Si no necesita ambas opciones de ordenación, puede eliminar el botón 'descendente' y cambiar el nombre del otro para que solo ordene.
Si no necesita ningún botón, puede eliminarlos para que el bookmarklet clasifique todas las áreas de texto directamente al hacer clic.
function oneButton() { Array.from(document.querySelectorAll('textarea')).map(function(b) { var a = document.createElement('div'); var d = document.createElement('button'); d.textContent = 'Sort'; d.addEventListener('click', function(f) { f.preventDefault(); b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n') }); a.appendChild(d); b.parentNode.insertBefore(a, b) }) } oneButton() // simulates bookmarklet click function noButton() { Array.from(document.querySelectorAll('textarea')).map(function(b) { b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n') }); } <textarea>B A</textarea><button onclick="this.previousSibling.value='B\nA'">Reset</button><br> <!-- noButton function is inserted, you can save this as bookmarklet --> <a href="javascript:void Array.from(document.querySelectorAll('textarea')).map(function(b){b.value=Array.from(new Set(b.value.split('\n'))).sort().join('\n')});" onclick="void Array.from(document.querySelectorAll('textarea')).map(function(b){b.value=Array.from(new Set(b.value.split('\n'))).sort().join('\n')});" title="You can save this as bookmarklet">'Sort directly' bookmarklet</a>Respuesta corta: la función de clasificación es sort() ( MDN ).
Detalles:
b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n') Esta es la sección responsable de la clasificación. Expliquémoslo: el código que ingresó usa una estructura de datos set ( MDN ), probablemente para evitar la duplicación, pero no siempre se consume. De hecho, puede ordenar una matriz con solo sort :
[5, 2, 6, 1].sort() // [1, 2, 5, 6]Pero explicaré las otras partes de este código:
Array.from : acepta el set y lo convierte en un iterador, por lo que se puede ejecutar esa ordenación en él. ( Ver más información aquí )new Set(b.value.split('\n'))) - Crea una estructura de datos de tipo conjunto que toma una matriz. La matriz consta de b.value.split('\ n') lo que significa el contenido del cuadro de texto, siendo cada fila un elemento de la matriz: n\ en JS es una caída de fila. Ahora tenemos una serie de líneas que estaban en el cuadro de texto, cuando no hay duplicados desde que usamos el set .
sort() . Ahora todo lo que queda es volver a conectar la matriz ordenada a una cadena de texto, con una caída de línea entre líneas. Hacemos esto con .join('\n') que hace que la matriz se conecte a una cadena de texto, con una caída de línea entre los miembros.
Y ahora regresaremos al comienzo de la línea - b.value = , que coloca la cadena procesada (después de convertirla en una matriz con split , eliminar duplicados ( set ), clasificar con sort y finalmente conectarla nuevamente a una matriz separada string en filas descendentes con join ) como el valor del cuadro de texto. ( Ver aquí sobre la configuración del valor de un cuadro de texto)
Espero haber ayudado :) Si algo no se entiende escribe en el comentario e intentaré responder.
Enlaces para una mayor expansión: