valor texto span mostrar modify con cambiar asignar agregar javascript jquery css regex mobile

javascript - texto - Verifique el espacio presionado y luego agregue la etiqueta diez usando jquery con multi idioma



modify label text javascript (7)

Estoy intentando agregar la etiqueta Diez # después del espacio presionado usando jquery cuando el usuario escribe. He creado esta DEMO de codepen.io.

En esta demostración, cuando escriba, por ejemplo ( how are you ), el código javascript lo cambiará de esta manera ( #how #are #you ).

Estoy revisando las palabras para agregar la etiqueta # (diez) con la function addHashtags(text) { ... } esta función.

1-) Así que normalmente funciona bien para los caracteres ingleses. Pero quiero hacerlo en múltiples idiomas. Ahora el problema es cuando üğşıöç caracteres turcos como ( üğşıöç ). Entonces, ¿qué pasó cuando escribo con la palabra de caracteres turcos. Puedes probarlo con esta palabra. Cuando escribo ( üzüm ) o ( hüseyin ), javascript debería cambiar estas palabras como ( #üzüm #hüseyin ) pero no lo es. Se está agregando de esta manera ( #ü#zü#m #hü#seyin ). (Resuelto)

2-) Otro problema es algún otro idioma. Javascript no agrega la etiqueta # (diez) cuando el usuario escribe árabe, Azerbaiyán, japonés, etc. No sucedió nada cuando escribo "me gusta" ( 私は家族と一緒に行きます ) o ( ผมไปกับครอบครัวของฉัน ) etc. Este es un gran problema para mí. Necesito una solucion (Resuelto)

3-) Si marca DEMO puede ver que he usado textInput . No funciona en Firefox pero funciona en dispositivos móviles. Entonces, si uso la keypress los códigos funcionan en FireFox pero no en dispositivos móviles. Mi código debería funcionar con todos los dispositivos. (Resuelto)

$(document).ready(function() { window.mobilecheck = function() { var check = false; (function(a) { if ( /(android|bb/d+|meego).+mobile|avantgo|bada//|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)//|plucker|pocket|psp|series(4|6)0|symbian|treo|up/.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( a ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s/-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|/-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw/-(n|u)|c55//|capi|ccwa|cdm/-|cell|chtm|cldc|cmd/-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc/-s|devi|dica|dmob|do(c|p)o|ds(12|/-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(/-|_)|g1 u|g560|gene|gf/-5|g/-mo|go(/.w|od)|gr(ad|un)|haie|hcit|hd/-(m|p|t)|hei/-|hi(pt|ta)|hp( i|ip)|hs/-c|ht(c(/-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i/-(20|go|ma)|i230|iac( |/-|//)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |//)|klon|kpt |kwc/-|kyo(c|k)|le(no|xi)|lg( g|//(k|l|u)|50|54|/-[a-w])|libw|lynx|m1/-w|m3ga|m50//|ma(te|ui|xo)|mc(01|21|ca)|m/-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(/-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)/-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|/-([1-8]|c))|phil|pire|pl(ay|uc)|pn/-2|po(ck|rt|se)|prox|psio|pt/-g|qa/-a|qc(07|12|21|32|60|/-[2-7]|i/-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55//|sa(ge|ma|mm|ms|ny|va)|sc(01|h/-|oo|p/-)|sdk//|se(c(/-|0|1)|47|mc|nd|ri)|sgh/-|shar|sie(/-|m)|sk/-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h/-|v/-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl/-|tdg/-|tel(i|m)|tim/-|t/-mo|to(pl|sh)|ts(70|m/-|m3|m5)|tx/-9|up(/.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|/-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(/-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas/-|your|zeto|zte/-/i.test( a.substr(0, 4) ) ) check = true; })(navigator.userAgent || navigator.vendor || window.opera); return check; }; // Move cursor to the end. function placeCaretAtEndX(el) { el.focus(); if ( typeof window.getSelection != "undefined" && typeof document.createRange != "undefined" ) { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } // Define special characters: var charactersX = [ 0, 32, // space 13 // enter // add other punctuation symbols or keys ]; // Convert characters to charCode function toCharCodeX(char) { return char.charCodeAt(0); } var forbiddenCharactersX = [ toCharCodeX("_"), toCharCodeX("-"), toCharCodeX("?"), toCharCodeX("*"), toCharCodeX("//"), toCharCodeX("/"), toCharCodeX("("), toCharCodeX(")"), toCharCodeX("="), toCharCodeX("&"), toCharCodeX("%"), toCharCodeX("+"), toCharCodeX("^"), toCharCodeX("#"), toCharCodeX("''"), toCharCodeX("<"), toCharCodeX("|"), toCharCodeX(">"), toCharCodeX("."), toCharCodeX(","), toCharCodeX(";") ]; $(document).on("textInput", "#text", function(event) { var code = event.which; window.mobilecheck() ? event.originalEvent.data.charCodeAt(0) : event.which; if (charactersX.indexOf(code) > -1) { // Get and modify text. var text = $("#text").text(); text = XRegExp.replaceEach(text, [ [/#/s*/g, ""], [//s{2,}/g, " "], [XRegExp("(?://s|^)([//p{L}//p{N}]+)(?=//s|$)(?=.*//s//1(?=//s|$))","gi"),""], [XRegExp("([//p{N}//p{L}]+)", "g"), "#$1"] ]); // Save content. $("#text").text(text); // Move cursor to the end placeCaretAtEndX(document.querySelector("#text")); } else if (forbiddenCharactersX.has(code)) { event.preventDefault(); } }); });

.container { position:relative; width:100%; max-width:600px; overflow:hidden; padding:10px; margin:0px auto; margin-top:50px; } * { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .addiez { position:relative; width:100%; padding:30px; border:1px solid #d8dbdf; outline:none; text-transform: lowercase; font-family: helvetica, arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .addiez::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgb(0, 0, 1); } .addiez[contentEditable=true]:empty:not(:focus):before { content:attr(placeholder); color: #444; } .note { position:relative; width:100%; padding:30px; font-weight:300; font-family: helvetica, arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height:1.8rem; font-size:13px; } .ad_text { position:relative; width:100%; padding:10px 30px; overflow:hidden; font-weight:300; font-family: helvetica, arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height:1.8rem; font-size:13px; }

<script src="https://unpkg.com/[email protected]/xregexp-all.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="addiez" contenteditable="true" id="text" placeholder="Write something with space"></div> <div class="ad_text" id="ad_text"></div>


Creo que esto servirá.

AVISO IMPORTANTE: No sé por qué, especialmente, deseaba espacio o ingreso. Pero cuando haces eso, se convierten en algunos problemas. Por ejemplo, cuando alguien cambia de opinión y elimina la entrada con retroceso, las etiquetas hash de salida siguen siendo las mismas, ya que el evento nunca se activa porque no se toca ninguna barra espaciadora. Es por eso que hice esto con la función keyup .

$("body").on("keypress", "#text", function(e) { if (e.which > 33 && e.which < 48 || e.which > 57 && e.which < 65 || e.which > 90 && e.which < 96 || e.keyCode === 13) { e.preventDefault(); } }); $("body").on("keyup", "#text", function(e) { var array = new Array(); var diez = new Array(); temparray = $(''.addiez'').html().split(" "); l = temparray.length; temparray[l-1] = temparray[l-1].replace(/&nbsp;/gi,''''); $.each(temparray, function(i, el){ el = el.replace(/&nbsp;/gi,''''); el = el.toLowerCase(); if($.inArray(el, array) === -1) array.push(el); }); for (var i = 0; i < array.length; i++) { diez[i] = "#" + array[i] + " "; } $("#ad_text").html(diez); });

.container { position:relative; width:100%; max-width:600px; overflow:hidden; padding:10px; margin:0px auto; margin-top:50px; } * { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .addiez { position:relative; width:100%; padding:30px; border:1px solid #d8dbdf; outline:none; font-family: helvetica, arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .addiez::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgb(0, 0, 1); } .addiez[contentEditable=true]:empty:not(:focus):before { content:attr(placeholder); color: #444; } .note { position:relative; width:100%; padding:30px; font-weight:300; font-family: helvetica, arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height:1.8rem; font-size:13px; } .ad_text { position:relative; width:100%; padding:10px 30px; overflow:hidden; font-weight:300; font-family: helvetica, arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; line-height:1.8rem; font-size:13px; text-transform: capitalize; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="addiez" contenteditable="true" id="text" placeholder="Write something with space"></div> <div class="ad_text" id="ad_text"></div> <div class="note">For example: When you write like: Hi bro how are you? Then jquery should change this text like this: #Hi #bro #how #are #you? I meant when user pressed space or pressed enter then add diez tag before the text like my exapmle.</div> </div>

Agregué text-transform: capitalize; porque me gusta :) Pero puedes deshabilitar por supuesto.


Dado que JS no es muy consciente de Unicode, puede usar rangos UTF-16 equivalentes
que corresponden a la propiedad /p{alnum} .

Recomiendo precompilar esto para residir en un lugar global.

Esta expresión regular solo coincidirá con un espacio en blanco inicial (o BOS) cuando sea seguido por
un carácter / p {alnum} Luego simplemente reemplaza con el espacio en blanco + #.

Básicamente

var Rx = /(^|/s)(?=<see below>/g; (donde Rx es global)
newSrc = strSrc.replace(Rx, "$1#");

Regex // delimitado

/(^|/s)(?=(?:[/u0030-/u0039/u0041-/u005A/u0061-/u007A/u00AA/u00B5/u00BA/u00C0-/u00D6/u00D8-/u00F6/u00F8-/u02C1/u02C6-/u02D1/u02E0-/u02E4/u02EC/u02EE/u0370-/u0374/u0376-/u0377/u037A-/u037D/u037F/u0386/u0388-/u038A/u038C/u038E-/u03A1/u03A3-/u03F5/u03F7-/u0481/u048A-/u052F/u0531-/u0556/u0559/u0561-/u0587/u05D0-/u05EA/u05F0-/u05F2/u0620-/u064A/u0660-/u0669/u066E-/u066F/u0671-/u06D3/u06D5/u06E5-/u06E6/u06EE-/u06FC/u06FF/u0710/u0712-/u072F/u074D-/u07A5/u07B1/u07C0-/u07EA/u07F4-/u07F5/u07FA/u0800-/u0815/u081A/u0824/u0828/u0840-/u0858/u08A0-/u08B4/u08B6-/u08BD/u0904-/u0939/u093D/u0950/u0958-/u0961/u0966-/u096F/u0971-/u0980/u0985-/u098C/u098F-/u0990/u0993-/u09A8/u09AA-/u09B0/u09B2/u09B6-/u09B9/u09BD/u09CE/u09DC-/u09DD/u09DF-/u09E1/u09E6-/u09F1/u0A05-/u0A0A/u0A0F-/u0A10/u0A13-/u0A28/u0A2A-/u0A30/u0A32-/u0A33/u0A35-/u0A36/u0A38-/u0A39/u0A59-/u0A5C/u0A5E/u0A66-/u0A6F/u0A72-/u0A74/u0A85-/u0A8D/u0A8F-/u0A91/u0A93-/u0AA8/u0AAA-/u0AB0/u0AB2-/u0AB3/u0AB5-/u0AB9/u0ABD/u0AD0/u0AE0-/u0AE1/u0AE6-/u0AEF/u0AF9/u0B05-/u0B0C/u0B0F-/u0B10/u0B13-/u0B28/u0B2A-/u0B30/u0B32-/u0B33/u0B35-/u0B39/u0B3D/u0B5C-/u0B5D/u0B5F-/u0B61/u0B66-/u0B6F/u0B71/u0B83/u0B85-/u0B8A/u0B8E-/u0B90/u0B92-/u0B95/u0B99-/u0B9A/u0B9C/u0B9E-/u0B9F/u0BA3-/u0BA4/u0BA8-/u0BAA/u0BAE-/u0BB9/u0BD0/u0BE6-/u0BEF/u0C05-/u0C0C/u0C0E-/u0C10/u0C12-/u0C28/u0C2A-/u0C39/u0C3D/u0C58-/u0C5A/u0C60-/u0C61/u0C66-/u0C6F/u0C80/u0C85-/u0C8C/u0C8E-/u0C90/u0C92-/u0CA8/u0CAA-/u0CB3/u0CB5-/u0CB9/u0CBD/u0CDE/u0CE0-/u0CE1/u0CE6-/u0CEF/u0CF1-/u0CF2/u0D05-/u0D0C/u0D0E-/u0D10/u0D12-/u0D3A/u0D3D/u0D4E/u0D54-/u0D56/u0D5F-/u0D61/u0D66-/u0D6F/u0D7A-/u0D7F/u0D85-/u0D96/u0D9A-/u0DB1/u0DB3-/u0DBB/u0DBD/u0DC0-/u0DC6/u0DE6-/u0DEF/u0E01-/u0E30/u0E32-/u0E33/u0E40-/u0E46/u0E50-/u0E59/u0E81-/u0E82/u0E84/u0E87-/u0E88/u0E8A/u0E8D/u0E94-/u0E97/u0E99-/u0E9F/u0EA1-/u0EA3/u0EA5/u0EA7/u0EAA-/u0EAB/u0EAD-/u0EB0/u0EB2-/u0EB3/u0EBD/u0EC0-/u0EC4/u0EC6/u0ED0-/u0ED9/u0EDC-/u0EDF/u0F00/u0F20-/u0F29/u0F40-/u0F47/u0F49-/u0F6C/u0F88-/u0F8C/u1000-/u102A/u103F-/u1049/u1050-/u1055/u105A-/u105D/u1061/u1065-/u1066/u106E-/u1070/u1075-/u1081/u108E/u1090-/u1099/u10A0-/u10C5/u10C7/u10CD/u10D0-/u10FA/u10FC-/u1248/u124A-/u124D/u1250-/u1256/u1258/u125A-/u125D/u1260-/u1288/u128A-/u128D/u1290-/u12B0/u12B2-/u12B5/u12B8-/u12BE/u12C0/u12C2-/u12C5/u12C8-/u12D6/u12D8-/u1310/u1312-/u1315/u1318-/u135A/u1380-/u138F/u13A0-/u13F5/u13F8-/u13FD/u1401-/u166C/u166F-/u167F/u1681-/u169A/u16A0-/u16EA/u16F1-/u16F8/u1700-/u170C/u170E-/u1711/u1720-/u1731/u1740-/u1751/u1760-/u176C/u176E-/u1770/u1780-/u17B3/u17D7/u17DC/u17E0-/u17E9/u1810-/u1819/u1820-/u1877/u1880-/u1884/u1887-/u18A8/u18AA/u18B0-/u18F5/u1900-/u191E/u1946-/u196D/u1970-/u1974/u1980-/u19AB/u19B0-/u19C9/u19D0-/u19D9/u1A00-/u1A16/u1A20-/u1A54/u1A80-/u1A89/u1A90-/u1A99/u1AA7/u1B05-/u1B33/u1B45-/u1B4B/u1B50-/u1B59/u1B83-/u1BA0/u1BAE-/u1BE5/u1C00-/u1C23/u1C40-/u1C49/u1C4D-/u1C7D/u1C80-/u1C88/u1CE9-/u1CEC/u1CEE-/u1CF1/u1CF5-/u1CF6/u1D00-/u1DBF/u1E00-/u1F15/u1F18-/u1F1D/u1F20-/u1F45/u1F48-/u1F4D/u1F50-/u1F57/u1F59/u1F5B/u1F5D/u1F5F-/u1F7D/u1F80-/u1FB4/u1FB6-/u1FBC/u1FBE/u1FC2-/u1FC4/u1FC6-/u1FCC/u1FD0-/u1FD3/u1FD6-/u1FDB/u1FE0-/u1FEC/u1FF2-/u1FF4/u1FF6-/u1FFC/u2071/u207F/u2090-/u209C/u2102/u2107/u210A-/u2113/u2115/u2119-/u211D/u2124/u2126/u2128/u212A-/u212D/u212F-/u2139/u213C-/u213F/u2145-/u2149/u214E/u2183-/u2184/u2C00-/u2C2E/u2C30-/u2C5E/u2C60-/u2CE4/u2CEB-/u2CEE/u2CF2-/u2CF3/u2D00-/u2D25/u2D27/u2D2D/u2D30-/u2D67/u2D6F/u2D80-/u2D96/u2DA0-/u2DA6/u2DA8-/u2DAE/u2DB0-/u2DB6/u2DB8-/u2DBE/u2DC0-/u2DC6/u2DC8-/u2DCE/u2DD0-/u2DD6/u2DD8-/u2DDE/u2E2F/u3005-/u3006/u3031-/u3035/u303B-/u303C/u3041-/u3096/u309D-/u309F/u30A1-/u30FA/u30FC-/u30FF/u3105-/u312D/u3131-/u318E/u31A0-/u31BA/u31F0-/u31FF/u3400-/u4DB5/u4E00-/u9FD5/uA000-/uA48C/uA4D0-/uA4FD/uA500-/uA60C/uA610-/uA62B/uA640-/uA66E/uA67F-/uA69D/uA6A0-/uA6E5/uA717-/uA71F/uA722-/uA788/uA78B-/uA7AE/uA7B0-/uA7B7/uA7F7-/uA801/uA803-/uA805/uA807-/uA80A/uA80C-/uA822/uA840-/uA873/uA882-/uA8B3/uA8D0-/uA8D9/uA8F2-/uA8F7/uA8FB/uA8FD/uA900-/uA925/uA930-/uA946/uA960-/uA97C/uA984-/uA9B2/uA9CF-/uA9D9/uA9E0-/uA9E4/uA9E6-/uA9FE/uAA00-/uAA28/uAA40-/uAA42/uAA44-/uAA4B/uAA50-/uAA59/uAA60-/uAA76/uAA7A/uAA7E-/uAAAF/uAAB1/uAAB5-/uAAB6/uAAB9-/uAABD/uAAC0/uAAC2/uAADB-/uAADD/uAAE0-/uAAEA/uAAF2-/uAAF4/uAB01-/uAB06/uAB09-/uAB0E/uAB11-/uAB16/uAB20-/uAB26/uAB28-/uAB2E/uAB30-/uAB5A/uAB5C-/uAB65/uAB70-/uABE2/uABF0-/uABF9/uAC00-/uD7A3/uD7B0-/uD7C6/uD7CB-/uD7FB/uF900-/uFA6D/uFA70-/uFAD9/uFB00-/uFB06/uFB13-/uFB17/uFB1D/uFB1F-/uFB28/uFB2A-/uFB36/uFB38-/uFB3C/uFB3E/uFB40-/uFB41/uFB43-/uFB44/uFB46-/uFBB1/uFBD3-/uFD3D/uFD50-/uFD8F/uFD92-/uFDC7/uFDF0-/uFDFB/uFE70-/uFE74/uFE76-/uFEFC/uFF10-/uFF19/uFF21-/uFF3A/uFF41-/uFF5A/uFF66-/uFFBE/uFFC2-/uFFC7/uFFCA-/uFFCF/uFFD2-/uFFD7/uFFDA-/uFFDC]|(?:/uD800[/uDC00-/uDC0B/uDC0D-/uDC26/uDC28-/uDC3A/uDC3C-/uDC3D/uDC3F-/uDC4D/uDC50-/uDC5D/uDC80-/uDCFA/uDE80-/uDE9C/uDEA0-/uDED0/uDF00-/uDF1F/uDF30-/uDF40/uDF42-/uDF49/uDF50-/uDF75/uDF80-/uDF9D/uDFA0-/uDFC3/uDFC8-/uDFCF]|/uD801[/uDC00-/uDC9D/uDCA0-/uDCA9/uDCB0-/uDCD3/uDCD8-/uDCFB/uDD00-/uDD27/uDD30-/uDD63/uDE00-/uDF36/uDF40-/uDF55/uDF60-/uDF67]|/uD802[/uDC00-/uDC05/uDC08/uDC0A-/uDC35/uDC37-/uDC38/uDC3C/uDC3F-/uDC55/uDC60-/uDC76/uDC80-/uDC9E/uDCE0-/uDCF2/uDCF4-/uDCF5/uDD00-/uDD15/uDD20-/uDD39/uDD80-/uDDB7/uDDBE-/uDDBF/uDE00/uDE10-/uDE13/uDE15-/uDE17/uDE19-/uDE33/uDE60-/uDE7C/uDE80-/uDE9C/uDEC0-/uDEC7/uDEC9-/uDEE4/uDF00-/uDF35/uDF40-/uDF55/uDF60-/uDF72/uDF80-/uDF91]|/uD803[/uDC00-/uDC48/uDC80-/uDCB2/uDCC0-/uDCF2]|/uD804[/uDC03-/uDC37/uDC66-/uDC6F/uDC83-/uDCAF/uDCD0-/uDCE8/uDCF0-/uDCF9/uDD03-/uDD26/uDD36-/uDD3F/uDD50-/uDD72/uDD76/uDD83-/uDDB2/uDDC1-/uDDC4/uDDD0-/uDDDA/uDDDC/uDE00-/uDE11/uDE13-/uDE2B/uDE80-/uDE86/uDE88/uDE8A-/uDE8D/uDE8F-/uDE9D/uDE9F-/uDEA8/uDEB0-/uDEDE/uDEF0-/uDEF9/uDF05-/uDF0C/uDF0F-/uDF10/uDF13-/uDF28/uDF2A-/uDF30/uDF32-/uDF33/uDF35-/uDF39/uDF3D/uDF50/uDF5D-/uDF61]|/uD805[/uDC00-/uDC34/uDC47-/uDC4A/uDC50-/uDC59/uDC80-/uDCAF/uDCC4-/uDCC5/uDCC7/uDCD0-/uDCD9/uDD80-/uDDAE/uDDD8-/uDDDB/uDE00-/uDE2F/uDE44/uDE50-/uDE59/uDE80-/uDEAA/uDEC0-/uDEC9/uDF00-/uDF19/uDF30-/uDF39]|/uD806[/uDCA0-/uDCE9/uDCFF/uDEC0-/uDEF8]|/uD807[/uDC00-/uDC08/uDC0A-/uDC2E/uDC40/uDC50-/uDC59/uDC72-/uDC8F]|/uD808[/uDC00-/uDF99]|/uD809[/uDC80-/uDD43]|/uD80C[/uDC00-/uDFFF]|/uD80D[/uDC00-/uDC2E]|/uD811[/uDC00-/uDE46]|/uD81A[/uDC00-/uDE38/uDE40-/uDE5E/uDE60-/uDE69/uDED0-/uDEED/uDF00-/uDF2F/uDF40-/uDF43/uDF50-/uDF59/uDF63-/uDF77/uDF7D-/uDF8F]|/uD81B[/uDF00-/uDF44/uDF50/uDF93-/uDF9F/uDFE0]|[/uD81C-/uD820][/uDC00-/uDFFF]|/uD821[/uDC00-/uDFEC]|/uD822[/uDC00-/uDEF2]|/uD82C[/uDC00-/uDC01]|/uD82F[/uDC00-/uDC6A/uDC70-/uDC7C/uDC80-/uDC88/uDC90-/uDC99]|/uD835[/uDC00-/uDC54/uDC56-/uDC9C/uDC9E-/uDC9F/uDCA2/uDCA5-/uDCA6/uDCA9-/uDCAC/uDCAE-/uDCB9/uDCBB/uDCBD-/uDCC3/uDCC5-/uDD05/uDD07-/uDD0A/uDD0D-/uDD14/uDD16-/uDD1C/uDD1E-/uDD39/uDD3B-/uDD3E/uDD40-/uDD44/uDD46/uDD4A-/uDD50/uDD52-/uDEA5/uDEA8-/uDEC0/uDEC2-/uDEDA/uDEDC-/uDEFA/uDEFC-/uDF14/uDF16-/uDF34/uDF36-/uDF4E/uDF50-/uDF6E/uDF70-/uDF88/uDF8A-/uDFA8/uDFAA-/uDFC2/uDFC4-/uDFCB/uDFCE-/uDFFF]|/uD83A[/uDC00-/uDCC4/uDD00-/uDD43/uDD50-/uDD59]|/uD83B[/uDE00-/uDE03/uDE05-/uDE1F/uDE21-/uDE22/uDE24/uDE27/uDE29-/uDE32/uDE34-/uDE37/uDE39/uDE3B/uDE42/uDE47/uDE49/uDE4B/uDE4D-/uDE4F/uDE51-/uDE52/uDE54/uDE57/uDE59/uDE5B/uDE5D/uDE5F/uDE61-/uDE62/uDE64/uDE67-/uDE6A/uDE6C-/uDE72/uDE74-/uDE77/uDE79-/uDE7C/uDE7E/uDE80-/uDE89/uDE8B-/uDE9B/uDEA1-/uDEA3/uDEA5-/uDEA9/uDEAB-/uDEBB]|[/uD840-/uD868][/uDC00-/uDFFF]|/uD869[/uDC00-/uDED6/uDF00-/uDFFF]|[/uD86A-/uD86C][/uDC00-/uDFFF]|/uD86D[/uDC00-/uDF34/uDF40-/uDFFF]|/uD86E[/uDC00-/uDC1D/uDC20-/uDFFF]|[/uD86F-/uD872][/uDC00-/uDFFF]|/uD873[/uDC00-/uDEA1]|/uD87E[/uDC00-/uDE1D])))/g

Regex crudo expandido

( ^ | /s ) # (1) (?= # /p{alnum} (?: [/u0030-/u0039/u0041-/u005A/u0061-/u007A/u00AA/u00B5/u00BA/u00C0-/u00D6/u00D8-/u00F6/u00F8-/u02C1/u02C6-/u02D1/u02E0-/u02E4/u02EC/u02EE/u0370-/u0374/u0376-/u0377/u037A-/u037D/u037F/u0386/u0388-/u038A/u038C/u038E-/u03A1/u03A3-/u03F5/u03F7-/u0481/u048A-/u052F/u0531-/u0556/u0559/u0561-/u0587/u05D0-/u05EA/u05F0-/u05F2/u0620-/u064A/u0660-/u0669/u066E-/u066F/u0671-/u06D3/u06D5/u06E5-/u06E6/u06EE-/u06FC/u06FF/u0710/u0712-/u072F/u074D-/u07A5/u07B1/u07C0-/u07EA/u07F4-/u07F5/u07FA/u0800-/u0815/u081A/u0824/u0828/u0840-/u0858/u08A0-/u08B4/u08B6-/u08BD/u0904-/u0939/u093D/u0950/u0958-/u0961/u0966-/u096F/u0971-/u0980/u0985-/u098C/u098F-/u0990/u0993-/u09A8/u09AA-/u09B0/u09B2/u09B6-/u09B9/u09BD/u09CE/u09DC-/u09DD/u09DF-/u09E1/u09E6-/u09F1/u0A05-/u0A0A/u0A0F-/u0A10/u0A13-/u0A28/u0A2A-/u0A30/u0A32-/u0A33/u0A35-/u0A36/u0A38-/u0A39/u0A59-/u0A5C/u0A5E/u0A66-/u0A6F/u0A72-/u0A74/u0A85-/u0A8D/u0A8F-/u0A91/u0A93-/u0AA8/u0AAA-/u0AB0/u0AB2-/u0AB3/u0AB5-/u0AB9/u0ABD/u0AD0/u0AE0-/u0AE1/u0AE6-/u0AEF/u0AF9/u0B05-/u0B0C/u0B0F-/u0B10/u0B13-/u0B28/u0B2A-/u0B30/u0B32-/u0B33/u0B35-/u0B39/u0B3D/u0B5C-/u0B5D/u0B5F-/u0B61/u0B66-/u0B6F/u0B71/u0B83/u0B85-/u0B8A/u0B8E-/u0B90/u0B92-/u0B95/u0B99-/u0B9A/u0B9C/u0B9E-/u0B9F/u0BA3-/u0BA4/u0BA8-/u0BAA/u0BAE-/u0BB9/u0BD0/u0BE6-/u0BEF/u0C05-/u0C0C/u0C0E-/u0C10/u0C12-/u0C28/u0C2A-/u0C39/u0C3D/u0C58-/u0C5A/u0C60-/u0C61/u0C66-/u0C6F/u0C80/u0C85-/u0C8C/u0C8E-/u0C90/u0C92-/u0CA8/u0CAA-/u0CB3/u0CB5-/u0CB9/u0CBD/u0CDE/u0CE0-/u0CE1/u0CE6-/u0CEF/u0CF1-/u0CF2/u0D05-/u0D0C/u0D0E-/u0D10/u0D12-/u0D3A/u0D3D/u0D4E/u0D54-/u0D56/u0D5F-/u0D61/u0D66-/u0D6F/u0D7A-/u0D7F/u0D85-/u0D96/u0D9A-/u0DB1/u0DB3-/u0DBB/u0DBD/u0DC0-/u0DC6/u0DE6-/u0DEF/u0E01-/u0E30/u0E32-/u0E33/u0E40-/u0E46/u0E50-/u0E59/u0E81-/u0E82/u0E84/u0E87-/u0E88/u0E8A/u0E8D/u0E94-/u0E97/u0E99-/u0E9F/u0EA1-/u0EA3/u0EA5/u0EA7/u0EAA-/u0EAB/u0EAD-/u0EB0/u0EB2-/u0EB3/u0EBD/u0EC0-/u0EC4/u0EC6/u0ED0-/u0ED9/u0EDC-/u0EDF/u0F00/u0F20-/u0F29/u0F40-/u0F47/u0F49-/u0F6C/u0F88-/u0F8C/u1000-/u102A/u103F-/u1049/u1050-/u1055/u105A-/u105D/u1061/u1065-/u1066/u106E-/u1070/u1075-/u1081/u108E/u1090-/u1099/u10A0-/u10C5/u10C7/u10CD/u10D0-/u10FA/u10FC-/u1248/u124A-/u124D/u1250-/u1256/u1258/u125A-/u125D/u1260-/u1288/u128A-/u128D/u1290-/u12B0/u12B2-/u12B5/u12B8-/u12BE/u12C0/u12C2-/u12C5/u12C8-/u12D6/u12D8-/u1310/u1312-/u1315/u1318-/u135A/u1380-/u138F/u13A0-/u13F5/u13F8-/u13FD/u1401-/u166C/u166F-/u167F/u1681-/u169A/u16A0-/u16EA/u16F1-/u16F8/u1700-/u170C/u170E-/u1711/u1720-/u1731/u1740-/u1751/u1760-/u176C/u176E-/u1770/u1780-/u17B3/u17D7/u17DC/u17E0-/u17E9/u1810-/u1819/u1820-/u1877/u1880-/u1884/u1887-/u18A8/u18AA/u18B0-/u18F5/u1900-/u191E/u1946-/u196D/u1970-/u1974/u1980-/u19AB/u19B0-/u19C9/u19D0-/u19D9/u1A00-/u1A16/u1A20-/u1A54/u1A80-/u1A89/u1A90-/u1A99/u1AA7/u1B05-/u1B33/u1B45-/u1B4B/u1B50-/u1B59/u1B83-/u1BA0/u1BAE-/u1BE5/u1C00-/u1C23/u1C40-/u1C49/u1C4D-/u1C7D/u1C80-/u1C88/u1CE9-/u1CEC/u1CEE-/u1CF1/u1CF5-/u1CF6/u1D00-/u1DBF/u1E00-/u1F15/u1F18-/u1F1D/u1F20-/u1F45/u1F48-/u1F4D/u1F50-/u1F57/u1F59/u1F5B/u1F5D/u1F5F-/u1F7D/u1F80-/u1FB4/u1FB6-/u1FBC/u1FBE/u1FC2-/u1FC4/u1FC6-/u1FCC/u1FD0-/u1FD3/u1FD6-/u1FDB/u1FE0-/u1FEC/u1FF2-/u1FF4/u1FF6-/u1FFC/u2071/u207F/u2090-/u209C/u2102/u2107/u210A-/u2113/u2115/u2119-/u211D/u2124/u2126/u2128/u212A-/u212D/u212F-/u2139/u213C-/u213F/u2145-/u2149/u214E/u2183-/u2184/u2C00-/u2C2E/u2C30-/u2C5E/u2C60-/u2CE4/u2CEB-/u2CEE/u2CF2-/u2CF3/u2D00-/u2D25/u2D27/u2D2D/u2D30-/u2D67/u2D6F/u2D80-/u2D96/u2DA0-/u2DA6/u2DA8-/u2DAE/u2DB0-/u2DB6/u2DB8-/u2DBE/u2DC0-/u2DC6/u2DC8-/u2DCE/u2DD0-/u2DD6/u2DD8-/u2DDE/u2E2F/u3005-/u3006/u3031-/u3035/u303B-/u303C/u3041-/u3096/u309D-/u309F/u30A1-/u30FA/u30FC-/u30FF/u3105-/u312D/u3131-/u318E/u31A0-/u31BA/u31F0-/u31FF/u3400-/u4DB5/u4E00-/u9FD5/uA000-/uA48C/uA4D0-/uA4FD/uA500-/uA60C/uA610-/uA62B/uA640-/uA66E/uA67F-/uA69D/uA6A0-/uA6E5/uA717-/uA71F/uA722-/uA788/uA78B-/uA7AE/uA7B0-/uA7B7/uA7F7-/uA801/uA803-/uA805/uA807-/uA80A/uA80C-/uA822/uA840-/uA873/uA882-/uA8B3/uA8D0-/uA8D9/uA8F2-/uA8F7/uA8FB/uA8FD/uA900-/uA925/uA930-/uA946/uA960-/uA97C/uA984-/uA9B2/uA9CF-/uA9D9/uA9E0-/uA9E4/uA9E6-/uA9FE/uAA00-/uAA28/uAA40-/uAA42/uAA44-/uAA4B/uAA50-/uAA59/uAA60-/uAA76/uAA7A/uAA7E-/uAAAF/uAAB1/uAAB5-/uAAB6/uAAB9-/uAABD/uAAC0/uAAC2/uAADB-/uAADD/uAAE0-/uAAEA/uAAF2-/uAAF4/uAB01-/uAB06/uAB09-/uAB0E/uAB11-/uAB16/uAB20-/uAB26/uAB28-/uAB2E/uAB30-/uAB5A/uAB5C-/uAB65/uAB70-/uABE2/uABF0-/uABF9/uAC00-/uD7A3/uD7B0-/uD7C6/uD7CB-/uD7FB/uF900-/uFA6D/uFA70-/uFAD9/uFB00-/uFB06/uFB13-/uFB17/uFB1D/uFB1F-/uFB28/uFB2A-/uFB36/uFB38-/uFB3C/uFB3E/uFB40-/uFB41/uFB43-/uFB44/uFB46-/uFBB1/uFBD3-/uFD3D/uFD50-/uFD8F/uFD92-/uFDC7/uFDF0-/uFDFB/uFE70-/uFE74/uFE76-/uFEFC/uFF10-/uFF19/uFF21-/uFF3A/uFF41-/uFF5A/uFF66-/uFFBE/uFFC2-/uFFC7/uFFCA-/uFFCF/uFFD2-/uFFD7/uFFDA-/uFFDC] | (?: /uD800 [/uDC00-/uDC0B/uDC0D-/uDC26/uDC28-/uDC3A/uDC3C-/uDC3D/uDC3F-/uDC4D/uDC50-/uDC5D/uDC80-/uDCFA/uDE80-/uDE9C/uDEA0-/uDED0/uDF00-/uDF1F/uDF30-/uDF40/uDF42-/uDF49/uDF50-/uDF75/uDF80-/uDF9D/uDFA0-/uDFC3/uDFC8-/uDFCF] | /uD801 [/uDC00-/uDC9D/uDCA0-/uDCA9/uDCB0-/uDCD3/uDCD8-/uDCFB/uDD00-/uDD27/uDD30-/uDD63/uDE00-/uDF36/uDF40-/uDF55/uDF60-/uDF67] | /uD802 [/uDC00-/uDC05/uDC08/uDC0A-/uDC35/uDC37-/uDC38/uDC3C/uDC3F-/uDC55/uDC60-/uDC76/uDC80-/uDC9E/uDCE0-/uDCF2/uDCF4-/uDCF5/uDD00-/uDD15/uDD20-/uDD39/uDD80-/uDDB7/uDDBE-/uDDBF/uDE00/uDE10-/uDE13/uDE15-/uDE17/uDE19-/uDE33/uDE60-/uDE7C/uDE80-/uDE9C/uDEC0-/uDEC7/uDEC9-/uDEE4/uDF00-/uDF35/uDF40-/uDF55/uDF60-/uDF72/uDF80-/uDF91] | /uD803 [/uDC00-/uDC48/uDC80-/uDCB2/uDCC0-/uDCF2] | /uD804 [/uDC03-/uDC37/uDC66-/uDC6F/uDC83-/uDCAF/uDCD0-/uDCE8/uDCF0-/uDCF9/uDD03-/uDD26/uDD36-/uDD3F/uDD50-/uDD72/uDD76/uDD83-/uDDB2/uDDC1-/uDDC4/uDDD0-/uDDDA/uDDDC/uDE00-/uDE11/uDE13-/uDE2B/uDE80-/uDE86/uDE88/uDE8A-/uDE8D/uDE8F-/uDE9D/uDE9F-/uDEA8/uDEB0-/uDEDE/uDEF0-/uDEF9/uDF05-/uDF0C/uDF0F-/uDF10/uDF13-/uDF28/uDF2A-/uDF30/uDF32-/uDF33/uDF35-/uDF39/uDF3D/uDF50/uDF5D-/uDF61] | /uD805 [/uDC00-/uDC34/uDC47-/uDC4A/uDC50-/uDC59/uDC80-/uDCAF/uDCC4-/uDCC5/uDCC7/uDCD0-/uDCD9/uDD80-/uDDAE/uDDD8-/uDDDB/uDE00-/uDE2F/uDE44/uDE50-/uDE59/uDE80-/uDEAA/uDEC0-/uDEC9/uDF00-/uDF19/uDF30-/uDF39] | /uD806 [/uDCA0-/uDCE9/uDCFF/uDEC0-/uDEF8] | /uD807 [/uDC00-/uDC08/uDC0A-/uDC2E/uDC40/uDC50-/uDC59/uDC72-/uDC8F] | /uD808 [/uDC00-/uDF99] | /uD809 [/uDC80-/uDD43] | /uD80C [/uDC00-/uDFFF] | /uD80D [/uDC00-/uDC2E] | /uD811 [/uDC00-/uDE46] | /uD81A [/uDC00-/uDE38/uDE40-/uDE5E/uDE60-/uDE69/uDED0-/uDEED/uDF00-/uDF2F/uDF40-/uDF43/uDF50-/uDF59/uDF63-/uDF77/uDF7D-/uDF8F] | /uD81B [/uDF00-/uDF44/uDF50/uDF93-/uDF9F/uDFE0] | [/uD81C-/uD820] [/uDC00-/uDFFF] | /uD821 [/uDC00-/uDFEC] | /uD822 [/uDC00-/uDEF2] | /uD82C [/uDC00-/uDC01] | /uD82F [/uDC00-/uDC6A/uDC70-/uDC7C/uDC80-/uDC88/uDC90-/uDC99] | /uD835 [/uDC00-/uDC54/uDC56-/uDC9C/uDC9E-/uDC9F/uDCA2/uDCA5-/uDCA6/uDCA9-/uDCAC/uDCAE-/uDCB9/uDCBB/uDCBD-/uDCC3/uDCC5-/uDD05/uDD07-/uDD0A/uDD0D-/uDD14/uDD16-/uDD1C/uDD1E-/uDD39/uDD3B-/uDD3E/uDD40-/uDD44/uDD46/uDD4A-/uDD50/uDD52-/uDEA5/uDEA8-/uDEC0/uDEC2-/uDEDA/uDEDC-/uDEFA/uDEFC-/uDF14/uDF16-/uDF34/uDF36-/uDF4E/uDF50-/uDF6E/uDF70-/uDF88/uDF8A-/uDFA8/uDFAA-/uDFC2/uDFC4-/uDFCB/uDFCE-/uDFFF] | /uD83A [/uDC00-/uDCC4/uDD00-/uDD43/uDD50-/uDD59] | /uD83B [/uDE00-/uDE03/uDE05-/uDE1F/uDE21-/uDE22/uDE24/uDE27/uDE29-/uDE32/uDE34-/uDE37/uDE39/uDE3B/uDE42/uDE47/uDE49/uDE4B/uDE4D-/uDE4F/uDE51-/uDE52/uDE54/uDE57/uDE59/uDE5B/uDE5D/uDE5F/uDE61-/uDE62/uDE64/uDE67-/uDE6A/uDE6C-/uDE72/uDE74-/uDE77/uDE79-/uDE7C/uDE7E/uDE80-/uDE89/uDE8B-/uDE9B/uDEA1-/uDEA3/uDEA5-/uDEA9/uDEAB-/uDEBB] | [/uD840-/uD868] [/uDC00-/uDFFF] | /uD869 [/uDC00-/uDED6/uDF00-/uDFFF] | [/uD86A-/uD86C] [/uDC00-/uDFFF] | /uD86D [/uDC00-/uDF34/uDF40-/uDFFF] | /uD86E [/uDC00-/uDC1D/uDC20-/uDFFF] | [/uD86F-/uD872] [/uDC00-/uDFFF] | /uD873 [/uDC00-/uDEA1] | /uD87E [/uDC00-/uDE1D] ) ) )


Hay una función simple de Javascript para hacer la funcionalidad;

function addDiszTag(str){ // var str = "Hi bro how are you?" str = str.split('' ''); //Output will be turned to be ["Hi", "bro", "how", "are", "you?"] var transformedArr = []; str.forEach(function(ele){transformedArr.push("#"+ele) }) // ["#Hi", "#bro", "#how", "#are", "#you?"] return transformedArr.join('' ''); //It will return "#Hi #bro #how #are #you?" }

Por favor agregue la validación para verificar el duplicado :-) Espero que haya ayudado


He hecho la solución casi perfecta para ti. ¡Échale un vistazo a Codepen!

Código completo:

var input; function diez(event){ var s = event.target.selectionStart; var e = event.target.selectionEnd; var v = event.target.value; var c = v.length; v = v.replace(/[^a-z0-9/s]/ig, ""); // line 8 var a = v.split(" "); var b = []; /* Remove this if-block if you want undeletable diez */ if(v == ""){ event.target.value = v; return; } /* --- */ for(var i = 0; i < a.length; i++){ var token = a[i]; if(i == 0) b.push("#" + token); else if(i > 0){ var previous = a[i-1]; if(previous.toLowerCase() != token.toLowerCase() && token != "") b.push("#" + token); else if (token == "") b.push(token); } } b = b.join(" "); c = b.length - c; event.target.value = b; event.target.selectionStart = s + c; event.target.selectionEnd = e + c; } $(document).ready(function() { input = document.getElementById("text"); input.addEventListener("keyup", diez, true); });

  • Utiliza jQuery solo para eventos preparados para documentos.
  • Mantiene la selección del usuario y la posición del cursor.
  • Código de vainilla Javascript.
  • Reemplazado hacky contenido editable div con un <input> adecuado.
  • Funciona en la pulsación de teclas, no en la prensa de espacio

ACTUALIZAR

  • Ya no puede escribir caracteres especiales: cualquier cosa, excepto las letras az, 0-9 y espacios en blanco. Puede agregar caracteres en la lista blanca en la línea 8 (por ejemplo, ruso, turco)

  • Los tokens que se parecen son rechazados.


Intente cambiar el código que reemplaza los espacios con guiones a esto:

$("body").on("keyup", "#text", function() { $("#ad_text").html($(this).html().replace(//s/g,"-")); go(); });

Eso actualizará tu #ad_text con espacios reemplazados por guiones. A partir de ahí, cambiar a "#" debería ser bastante sencillo.

Su código original estaba llamando a .replace en el elemento jQuery devuelto, no al .html .


Las expresiones regulares de JavaScript no son compatibles con Unicode, al menos hablan ES5. Para poder usar los literales de Unicode, debe trabajar con /u (secuencias de escape de Unicode) o bibliotecas como XRegExp que brindan soporte para las propiedades de Unicode.

Al importar XRegExp a su proyecto, puede traducir expresiones regulares antiguas a nuevos patrones compatibles con Unicode. Las propiedades de Unicode están disponibles para ser utilizadas en notación estándar /p{L} o de una sola letra /pL .

Modifiqué un poco su código para dar vida a esta característica:

text = XRegExp.replaceEach(text, [ [/#/s*/g, ""], [//s{2,}/g, " "], [XRegExp(`(?://s|^)([//p{L}//p{N}]+)(?=//s|$)(?=.*//s//1(?=//s|$))`, "gi"), ""], [XRegExp(`([//p{N}//p{L}]+)`, "g"), "#$1"] ]);

Las primeras dos expresiones regulares son fáciles de entender (las tenías antes) pero la tercera parece ser simple, pero si eres más preciso, encontrarás que (?://s|^) y (?=//s|$) ambos corresponden a /b y como /b usa interpretaciones de ASCII solo del límite de palabra , tuve que resolverlo así.

Demo en vivo

Desglose :

  • /p{L} cualquier tipo de carta de cualquier idioma.
  • /p{N} cualquier tipo de carácter numérico en cualquier script.

Más sobre> categorías Unicode <.


Para obtener "#Hi #bro #cómo # eres # ¿tu?", Puedes hacer algo como esto:

$(document).ready(function() { $("body").on("keyup", "#text", function(e) { // Add space after press return if(e.keyCode == 13) { $(this).text($(this).text()+'' ''); } // Format div content after press space or return if(e.keyCode == 32 || e.keyCode == 13) { var content = $(this).text(); // Format content content = ''#'' + content.replace(/#+/g, '''').replace(//s+/g, '' #''); // Set content $(this).html(content); // Put cursor to the end of div cursorManager.setEndOfContenteditable(this); } }); });

Encontrará cursorManager.setEndOfContenteditable () como la respuesta a esta pregunta

1) Para detectar duplicados, debe transformar la variable de contenido en una matriz con el método split (), buscar duplicados en esta matriz y luego usar el método join () para transformar la matriz en una cadena.

2) Para no permitir _-? * / () = &% + ^ # ''<|>.,;! puede escribir una función para eliminar estos caracteres y llamarla cada vez que se presiona una tecla. Solo agrega tu función en la parte superior de la función de evento keyup.