Buscar un código de JavaScript

Sencillo Editor basado en "execCommand" incluido en JavaScript. Simplifica bastante el código necesario para ciertos comandos; estos comandos son ampliables siguiendo instruciones y documentación sobre "execCommand".
Es compatible con la mayoría de navegadores, con escasas diferencias. Se ha utilizado a lo largo de años para construir editores más sofisticados.

Es útil para experimentar y ver resultados. Puede ser adaptable con CSS-Style a pequeños proyectos. En fin...


Un saludo

En este código de ejemplo, muestro como crear un editor wysiwyg con el comando execCommand().

La lista de instrucciones posibles son:

backColor
Change the background color.

bold
Toggles bold text on and off.

copy
Copy selected text to clipboard.

createLink
Creates a link on selected text.

cut
Cut selected text and copy to clipborad.

delete
Delete the selected text.

fontName
Change the font family.

fontSize
Change the Font Size.

foreColor
Change the Font Color.

formatBlock
Format selection into a new block.

indent
Indent the selection.

insertHorizontalRule
Insert an <hr /> element.

insertHTML
Not supported by IE. Insert custom HTML strings.

insertImage
Insert an image element referencing an image file URI.

insertOrderedList
Insert an Ordered List element.

insertUnorderedList
Insert an Unordered List element.

insertParagraph
Insert a paragraph element.

italic
Toggles italicized text on and off.

justifyCenter
Center the selection.

justifyFull
Fully justify the selection.

justifyLeft
Left justify the selection.

justifyRight
Right justify the selection.

outdent
Outdent the selection.

paste
Paste contents of clipboard.

redo
Redo an Undo command.

removeFormat
Remove formatting from selection.

selectAll
Select everything within the content editable element.

strikeThrough
Strikes a line through the selection.

styleWithCSS
Style the selection with CSS.

subscript
Format the selection to subscript.

superscript
Format the selection to superscript.

underline
Toggles underline text on and off.

undo
Undo the last operation performed in the editable element.

unlink
Remove a link from the selection.

Script para editar y probar código HTML, CSS, JavaScript, etc. online y offline. Pega el código y pulsa el botón. El resultado se muestra en una ventana. Muy fácil de manejar y compatible.

Podemos autorizar ó restringir la edición de texto con JavaScript. Este Script, actúa al clicar en una zona de texto que previamente está declarada dentro de una función...
Modificamos el texto por medio de un Textarea que, al perder el focus, se oculta y devuelve el resultado a la etiqueta que contiene dicho texto. Todo el proceso, se produce en tiempo real, en el lado cliente.
Puede tener diversas aplicaciones.

Espero sea útil.

Funcion para cambiar el color de fondo colocando los valores RGB en un formulario.

Este código sirve para crear una cuenta regresiva que muestra el tiempo restante hasta una fecha y hora específicas, como el lanzamiento de un producto, un evento o una página web. Se actualiza en tiempo real y muestra los días, horas, minutos y segundos restantes de forma dinámica.

Es ideal para incluir en páginas web o proyectos donde quieras mantener a tus usuarios informados sobre el tiempo restante para un hito importante. Cuando el temporizador llega a cero, se puede mostrar un mensaje personalizado, como "¡Ya estamos en directo!" o cualquier texto que elijas. Ni necesitas más pildoras de Javascript, soy Alejandro Tamargo editor_url'>Desarrollador Web en Asturias

Notificaciones al estilo Toast flotante con retardo de ocultamiento

Suelo trabajar con Bootstrap y ya no queria usar JQuery para manejar la libreria DataTable.

Se que existen muchas librerias DataTable con Vanilla Javascript, Vue, React, etc..

Pero queria tener algo sencillo, de solo configurar 3-4 variables y armar mi datatable dinamica.

Pues bien como suelo usar Bootstrap me ahorre de hacer el css y solo me hice el js.

Lo publico por si alguien desea usarlo y/o se animan para crear un nucleo solido con funciones mas complejas.

Repito cualquier error por favor háganlo saber (que debo tener), ya que lo hice al paso y aun no lo uso en producción.

SCRIPT PARA GENERAR UN PASSWORD SEGURO

Incluye tres niveles
1) Debil
2) Fuerte
3) Muy fuerte

Todas las password generadas incluyen al menos
1 Numero
1 Mayuscula
1 Minuscula
1 Caracter especial
8 lenght


editor_code'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <title>Generar Pass</title> </head> <body> <section class="container mt-3"> <h1 class="text-center"> Genera tu password <h5 class="text-center"> Incluimos Mayusculas, Minusculas, Numeros y Caracteres especiales </h5> </h1> <hr /> <div class="row justify-content-around mt-3"> <div class="col-4"> <h4 class="text-center my-2 mb-4">Escoje cual contraseña</h4> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="sel" id="i1" value="1" role="button" /> <label class="form-check-label" for="i1" role="button">Debil</label> </div> <div class="vr"></div> <div class="form-check form-check-inline ms-2"> <input class="form-check-input" type="radio" name="sel" id="i2" value="2" role="button" /> <label class="form-check-label" for="i2" role="button" >Fuerte</label > </div> <div class="vr"></div> <div class="form-check form-check-inline ms-2"> <input class="form-check-input" type="radio" name="sel" id="i3" value="3" role="button" /> <label class="form-check-label" for="i3" role="button" >Muy Fuerte</label > </div> <div class="row justify-content-center mt-4"> <button class="btn btn-primary">Generar</button> </div> </div> <div class="vr bg-light border-end border-secondary"></div> <div id="div_res" class="col-4 d-none"> <h2 id="dev" class="text-center border rounded p-3 shadow"></h2> <div class="row mt-3"> <div class="col-4"> <span id="cop" class="btn btn-outline-dark">copy</span> </div> <div class="col-4"> <a href="https://ciberprotector.com/comprobador-de-contrase%C3%B1as/" target="_blank" >Ciberprotector</a > </div> <div class="col-4"> <a href="https://delinea.com/resources/password-strength-checker" target="_blank" >Delinea</a > </div> </div> </div> </div> </section> <script> document .querySelector(".btn-primary") .addEventListener("click", function () { let a; div_res.classList.add("d-none"); dev.classList.remove( "bg-danger", "bg-secondary", "bg-warning", "text-light", "text-warning", "text-success" ); document.querySelectorAll('[name="sel"]').forEach(function (e) { if (e.checked) a = e.value; }); if (a != undefined) { 1 == a ? dev.classList.add("bg-danger", "text-light") : 2 == a ? dev.classList.add("bg-secondary", "text-warning") : dev.classList.add("bg-warning", "text-success"); div_res.classList.remove("d-none"); dev.innerText = generar_pass(a); } }); const copyContent = async () => { let text = document.getElementById("dev").innerText; try { await navigator.clipboard.writeText(text); console.log("Content copied to clipboard"); } catch (err) { console.error("Failed to copy: ", err); } }; cop.addEventListener("click", copyContent); /* CODIGO GENERAR PASS */ const generar_pass = (t) => { let e; if (1 == t) for (let a = 0; (e = aleatorio(8)), check_pass(e) != t; a++); else if (2 == t) for (let a = 0; (e = aleatorio(12)), check_pass(e) != t; a++); else for (let a = 0; (e = aleatorio(14)), check_pass(e) != t; a++); return e; }, aleatorio = (t) => { let e, a = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.*+-#@<>~"; const r = () => ( (e = (() => { let e = ""; for (var r = 0, l = a.length; r < t; ++r) e += a.charAt(Math.floor(Math.random() * l)); return e; })()), !!( e.match(/\W|_/g) && e.match(/(\d+)/g) && e.match(/[a-z]/g) && e.match(/[A-Z]/g) ) && e ); for (let t = 0; !r(); t++); return e; }, check_pass = (t) => { let e, a = [ t.match(/\W|_/g).length, t.match(/(\d+)/g).length, t.match(/[a-z]/g).length, t.match(/[A-Z]/g).length, ]; for (let t = 0; t < a.length; t++) { let r = a[t]; if (((e = ""), 1 == r)) { e = 1; break; } if (2 == r) { e = 2; break; } e = 3; } return e; }; </script> </body> </html>

Función que mediante el comando replace(), eliminar todos los caracteres de una cadena que no sean ASCII.

editor_code'>removeNonASCII("la cáàasa azuúl"); // "la casa azul" removeNonASCII("láàäéèñÑa"); // "la"