validacion - validar formulario javascript html5

Javascript: resalte la subcadena manteniendo el caso original pero buscando en modo insensible al caso

Question

Estoy tratando de escribir un "cuadro de búsqueda de sugerencias" y no puedo encontrar una solución que permita resaltar una subcadena con javascript manteniendo el caso original.

Por ejemplo, si busco " ca ", busco el lado del servidor en un modo que no distingue entre mayúsculas y minúsculas y tengo los siguientes resultados:

Calculadora

calendario

ESCAPAR

Me gustaría ver la cadena de búsqueda en todas las palabras anteriores, por lo que el resultado debería ser:

Ca lculator

ca lendar

ES CA PE

Lo intenté con el siguiente código:

var reg = new RegExp(querystr, ''gi'');
var final_str = ''foo '' + result.replace(reg, ''<b>''+querystr+''</b>'');
$(''#''+id).html(final_str);

Pero obviamente de esta manera pierdo el estuche original!

¿Hay alguna manera de resolver este problema?

Answer 1

Hago exactamente lo mismo.

Necesitas hacer una copia.

Almaceno en la base de datos una copia de la cadena real, en minúsculas.

Luego busco usando una versión minúscula de la cadena de consulta o hago una expresión regular que no distingue entre mayúsculas y minúsculas.

Luego use el índice de inicio encontrado resultante en la cadena principal, más la longitud de la cadena de consulta, para resaltar la cadena de consulta dentro del resultado.

No puede utilizar la cadena de consulta en el resultado ya que su caso no está determinado. Es necesario resaltar una parte de la cadena original .

Answer 2

He encontrado una manera más fácil de lograrlo. La expresión regular de JavaScript recuerda la cadena que coincide. Esta característica se puede utilizar aquí.

He modificado un poco el código.

reg = new RegExp("("+querystr.trim()+")", ''gi'');
final_str = ''foo '' + result.replace(reg, "<b>&1</b>");
$(''#''+id).html(final_str);

Answer 3

No es exactamente perfecto, ya que reemplaza a todos por una char inferior

let ߐ = document.body
function check(_ૐ){
_ૐ_ = new RegExp(_ૐ, "ig") 
ߐ.innerHTML=ߐ.innerHTML.replace(_ૐ_,"<b>"+_ૐ+"</b>")
}

check(''ca'')

Calculator

calendar

ESCAPE

Cardan de voiture cassé

Answer 4

Si bien las otras respuestas hasta ahora parecen simples, no se pueden usar realmente en muchos casos del mundo real, ya que no manejan el texto HTML correcto que se escapa y el RegExp que se escapa. Si desea resaltar todos los fragmentos posibles, mientras escapa el texto correctamente, una función como esa devolvería todos los elementos que debería agregar a su cuadro de sugerencias:

function highlightLabel(label, term) {
  if (!term) return [ document.createTextNode(label) ]
  const regex = new RegExp(term.replace(/[//^$*+?.()|[/]{}]/g, ''//$&''), ''gi'')
  const result = []
  let left, match, right = label
  while (match = right.match(regex)) {
    const m = match[0], hl = document.createElement(''b''), i = match.index
    b.innerText = m
    left = right.slice(0, i)
    right = right.slice(i + m.length)
    result.push(createTextNode(left), hl)
    if (!right.length) return result
  }
  result.push(createTextNode(right))
  return result
}

Answer 5

Utilice una función para el segundo argumento para .replace() que devuelve la cadena coincidente real con las etiquetas concatenadas.

Pruébelo: http://jsfiddle.net/4sGLL/

reg = new RegExp(querystr, ''gi'');
       // The str parameter references the matched string
       //    --------------------------------------v
final_str = ''foo '' + result.replace(reg, function(str) {return ''<b>''+str+''</b>''});
$(''#'' + id).html(final_str);​

Ejemplo de JSFiddle con entrada: https://jsfiddle.net/pawmbude/

Answer 6

Versión ES6

const highlight = (needle, haystack) =>
  haystack.replace(new RegExp(needle, ''gi''), str => `<strong>${str}
</strong>`)

Answer 7

buenos resultados con

function str_highlight_text(string, str_to_highlight){
   var reg = new RegExp(str_to_highlight, ''gi'');
   return string.replace(reg, function(str) {return ''<span style="background-color:#ffbf00;color:#fff;"><b>''+str+''</b></span>''});
}

y más fácil de recordar ... gracias al usuario 113716: https://.com/a/3294644/2065594

Answer 8

.match() realiza una coincidencia que no distingue entre mayúsculas y minúsculas y devuelve una matriz de las coincidencias con un caso intacto.

var matches = str.match(queryString),
    startHere = 0,
    nextMatch,
    resultStr ='''',
    qLength = queryString.length;

for (var match in matches) {
    nextMatch = str.substr(startHere).indexOf(match);
    resultStr = resultStr + str.substr(startHere, nextMatch) + ''<b>'' + match + ''</b>'';
    startHere = nextMatch + qLength;
}

Answer 9

Resalte el término de búsqueda y el anclaje a la primera aparición - Inicio

function highlightSearchText(searchText) {
    var innerHTML = document.documentElement.innerHTML;
    var replaceString = ''<mark>''+searchText+''</mark>'';
    var newInnerHtml = this.replaceAll(innerHTML, searchText, replaceString);
    document.documentElement.innerHTML = newInnerHtml;
    var elmnt = document.documentElement.getElementsByTagName(''mark'')[0]
    elmnt.scrollIntoView();
}

function replaceAll(str, querystr, replace) {
    var reg = new RegExp(querystr, ''gi'');
    var final_str = str.replace(reg, function(str) {return ''<mark>''+str+''</mark>''});
    return final_str
}

Resalte el término de búsqueda y el anclaje a la primera aparición - Fin