javascript - u00f3 - quitar acentos jquery
Detección de soporte de caracteres Unicode individuales con JavaScript (4)
¿Es posible detectar si el cliente admite un carácter Unicode en particular o si se procesará como un cuadro de glifo faltante?
Importante: Soporte en tantos navegadores como sea posible
No es importante: eficiencia, velocidad o elegancia.
El único método que puedo pensar en intentar es usar un lienzo, así que pensé en preguntar antes de comenzar a ir por ese camino.
¡Gracias!
Editar: Esto no está destinado para su uso en un sitio web público; Solo estoy tratando de compilar una lista de caracteres admitidos por cada navegador.
Esto es más una idea descabellada que una respuesta real:
Si pudieras encontrar un personaje que sabías que siempre se representaría como un cuadro de glifo faltante, podrías usar la misma técnica que este detector de fuentes de javascript: generar el carácter y el cuadro de glifo faltante fuera de la pantalla y comparar su ancho. Si son diferentes, entonces sabes que el personaje no se está mostrando como un cuadro de glifo faltante. Por supuesto, esto no funcionará en absoluto para las fuentes de ancho fijo, y podría tener muchos negativos fijos para otras fuentes donde muchos de los caracteres tienen el mismo ancho.
No estoy seguro de si se puede confiar en seguir adelante (los navegadores pueden cambiar lo que se muestra para los caracteres no compatibles), ni estoy seguro de que esté optimizado (ya que no entiendo bien los límites ideales para medir aquí), pero El siguiente enfoque (de dibujar texto en un lienzo e inspeccionar el resultado como una imagen) puede, si se revisa, proporcionar una verificación más confiable y precisa que la del ancho. Todo el código al principio es solo la detección del navegador que debemos usar ya que la detección de características no es posible.
(function () {
// http://www.quirksmode.org/js/detect.html
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
/**
* Checks whether a given character is supported in the specified font. If the
* font argument is not provided, it will default to sans-serif, the default
* of the canvas element
* @param {String} chr Character to check for support
* @param {String} [font] Font Defaults to sans-serif
* @returns {Boolean} Whether or not the character is visually distinct from characters that are not supported
*/
function characterInFont (chr, font) {
var data,
size = 10, // We use 10 to confine results (could do further?) and minimum required for 10px
x = 0,
y = size,
canvas = document.createElement(''canvas''),
ctx = canvas.getContext(''2d'');
// Necessary?
canvas.width = size;
canvas.height = size;
if (font) { // Default of canvas is 10px sans-serif
font = size + ''px '' + font; // Fix size so we can test consistently
/**
// Is there use to confining by this height?
var d = document.createElement("span");
d.font = font;
d.textContent = chr;
document.body.appendChild(d);
var emHeight = d.offsetHeight;
document.body.removeChild(d);
alert(emHeight); // 19 after page load on Firefox and Chrome regardless of canvas height
//*/
}
ctx.fillText(chr, x, y);
data = ctx.getImageData(0, 0, ctx.measureText(chr).width, canvas.height).data; // canvas.width
data = Array.prototype.slice.apply(data);
function compareDataToBox (data, box, filter) {
if (filter) { // We can stop making this conditional if we confirm the exact arrays will continue to work, or otherwise remove and rely on safer full arrays
data = data.filter(function (item) {
return item != 0;
});
}
return data.toString() !== box;
}
var missingCharBox;
switch (BrowserDetect.browser) {
case ''Firefox'': // Draws nothing
missingCharBox = '''';
break;
case ''Opera'':
//missingCharBox = ''0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,197,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,73,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,36,0,0,0,0,0,0,0,0,0,0,0,197,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,73,0,0,0,0'';
missingCharBox = ''197,255,255,255,255,73,36,36,36,36,36,36,36,36,197,255,255,255,255,73'';
break;
case ''Chrome'':
missingCharBox = ''2,151,255,255,255,255,67,2,26,2,26,2,26,2,26,2,26,2,26,2,26,2,26,2,151,255,255,255,255,67'';
break;
case ''Safari'':
missingCharBox = ''17,23,23,23,23,5,52,21,21,21,21,41,39,39,39,39,39,39,39,39,63,40,40,40,40,43'';
break;
default:
throw ''characterInFont() not tested successfully for this browser'';
}
return compareDataToBox(data, missingCharBox, true);
}
// EXPORTS
((typeof exports !== ''undefined'') ? exports : this).characterInFont = characterInFont;
}());
var r1 = characterInFont(''a'', ''Arial''); // true
var r2 = characterInFont(''/uFAAA'', ''Arial''); // false
alert(r1);
alert(r2);
ACTUALIZACIÓN 1
Intenté actualizar para Firefox moderno (para tratar de verificar los dígitos hexadecimales esperados dentro del lienzo), y verificando que, a diferencia de mi código anterior, el lienzo (y el patrón para coincidir) fuera lo suficientemente grande como para acomodar el más amplio carácter por context.measureText() (U + 0BCC de mis pruebas, aunque presumiblemente depende de la fuente, en mi caso "Arial Unicode MS"). Sin embargo, measureText https://bugzilla.mozilla.org/show_bug.cgi?id=442133#c9 , measureText responde erróneamente al zoom solo para los caracteres desconocidos. Ahora, si solo uno pudiera simular el zoom en el lienzo de JavaScript para afectar estas medidas (y solo esas medidas) ...
Código disponible para referencia en https://gist.github.com/brettz9/1f061bb2ce06368db3e5
Si desea maximizar la compatibilidad con el navegador, probablemente no quiera confiar en javascript para nada. Muchos navegadores móviles ni siquiera lo soportan.
Si el navegador no admite un conjunto de caracteres, ¿cuál es el retroceso? ¿Mostrando el contenido en otro idioma? Quizás los enlaces uno al sitio que cambian los idiomas a pedido serían más robustos.
Siempre puedes evaluar cada carácter usando el método charCodeAt (). Esto devolverá el valor del carácter Unicode. Dependiendo de lo que esté haciendo, puede restringir el rango que desea aceptar como caracteres "válidos" ... Si copia el carácter que está en el "cuadro", puede usar un traductor de caracteres en la web para ver qué El valor correspondiente de Unicode es.
Aquí hay uno que busqué en Google y lo encontré: ingrese la descripción del enlace aquí