Javascript: mettre en évidence une sous-chaîne de garder l'étui d'origine, mais la recherche dans la casse en mode

Je suis en train d'écrire une "suggestion boîte de recherche" et je ne peux pas trouver une solution qui permet de mettre en évidence une sous-chaîne avec javascript en gardant l'étui d'origine.

Par exemple, si je recherche pour "ca" je recherche côté serveur dans une casse de mode et j'ai les résultats suivants:

Calculatrice

calendrier

ÉCHAPPER

Je voudrais voir la chaîne de recherche dans tous les précédents mots, de sorte que le résultat devrait être:

Calculator

cacivils

ESCAPE

J'ai essayé avec le code suivant:

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

Mais, évidemment, de cette façon, je lâche l'affaire!

Est-il un moyen de résoudre ce problème?

InformationsquelleAutor Giovanni Di Milia | 2010-07-20

56

Utiliser une fonction pour la deuxième argument pour .replace() qui retourne la vraie chaîne correspond à la concaténation des étiquettes.

L'essayer: 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 ''+str+''});
$('#' + id).html(final_str);
```
JSFiddle Exemple d'Entrée: https://jsfiddle.net/pawmbude/
- La meilleure façon de le faire, mais je voudrais le faire sans une fonction: result.replace(reg, '$&'). Ne sais pas à propos de la performance, bien que, il semble juste plus agréable.
- le la solution parfaite
- Je n'ai pas non plus, mais j'oublie toujours le function syntaxe je suis donc allé à la recherche de la documentation. J'ai trouvé ceci par 'accident'.
- zut, je savais que la mienne était un peu trop de travail...
- Merci beaucoup!!!!
- Gardez à l'esprit que cette approche ne fonctionnera pas si vous voulez faire correspondre les lettres, où qu'ils apparaissent dans la chaîne, par exemple, si l'utilisateur tape js et vous souhaitez les mettre en évidence séparément dans "JavaScript". Vous devez vérifier chaque lettre individuellement dans ce cas.
- Ce n'est pas prendre soin d'évitement correcte cependant.
- Le scénario ci-dessus gère pas le caractère spécial de l'ignorer.[e.g] jsfiddle.net/40wfnx3z si vous recherche le texte "test(123)" qu'il va jeter erreur "Uncaught Erreur de Syntaxe: expression régulière non Valide: /test(/: Indéterminé groupe" et de mettre en évidence la fonctionnalité de pause.Veuillez ajouter ces fonctionnalités, cette solution sera satisfait de répondre.
InformationsquelleAutor user113716
6

ES6 version
```
const highlight = (needle, haystack) =>
 haystack.replace(new RegExp(needle, 'gi'), str => `${str}
`)
```
- Hé, pouvez vous s'il vous plaît vérifier cette stackoverflow.com/questions/49420541/...
- sera-ce s'échapper html et le texte?
InformationsquelleAutor serby

Tandis que les autres réponses jusqu'à présent semblent simples, ils ne peut pas vraiment être utilisé dans de nombreux monde réel des cas, car ils ne font pas de gérer correctement le texte HTML de s'échapper et de RegExp s'échapper. Si vous voulez mettre en valeur chaque extrait, tout en échappant bien le texte, une fonction qui retourne tous les éléments que vous devez ajouter à votre boîte à suggestions:

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
    hl.innerText = m
    left = right.slice(0, i)
    right = right.slice(i + m.length)
    result.push(document.createTextNode(left), hl)
    if (!right.length) return result
  }
  result.push(document.createTextNode(right))
  return result
}

vous devriez au moins vérifier que le code que vous envoyez. createTextNode est undef (est-ce un document.createTextNode?) b est le fnud, est-il hl ?
Merci, j'ai mis à jour le code.

InformationsquelleAutor rosenfeld

Pas exactement parfait et tout remplacer par une baisse de char:

JS:

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

check('ca')

HTML:

Calculator

calendar

ESCAPE

Cardan de voiture cassé

InformationsquelleAutor NVRM

0

Je faire exactement la même chose.

Vous avez besoin de faire une copie.

- Je stocker dans la base de données d'une copie du réel, chaîne de caractères, en bas de casse.

Puis-je rechercher à l'aide d'un minuscule version de la chaîne de requête ou de faire un casse regexp.

Et utilise le résultat trouvé index de début dans la chaîne principale, plus la longueur de la chaîne de requête, pour mettre en évidence la chaîne de requête dans le résultat.

Vous ne pouvez pas utiliser la chaîne de requête dans le résultat depuis son cas n'est pas déterminée. Vous avez besoin de mettre en évidence une partie de la original chaîne.

InformationsquelleAutor Larry K

de bons résultats avec

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>'});
}

et plus facile à retenir...
thx pour user113716: https://stackoverflow.com/a/3294644/2065594

InformationsquelleAutor Cyril Jacquart

Mettre en évidence terme de recherche et d'ancrage à la première occurence - Début

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
}

Mettre en évidence terme de recherche et d'ancrage à la première occurence de Fin d'

InformationsquelleAutor PradeepKN

-1

.match() effectue la correspondance insensible à la casse et renvoie un tableau de correspondances avec des cas intacte.

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;
}

InformationsquelleAutor jasongetsdown

-1

J'ai trouvé un moyen plus simple pour y parvenir. JavaScript expression régulière se souvient de la chaîne identique. Cette fonction peut être utilisée ici.

J'ai modifié un peu le code.
```
reg = new RegExp("("+querystr.trim()+")", 'gi');
final_str = 'foo ' + result.replace(reg, "&1");
$('#'+id).html(final_str);
```
- pouvez-vous ajouter une description à propos de la différence entre la solution et la accepté de répondre ? et l'utilité de l' ")" ?
InformationsquelleAutor Avinash

Vous devez vous connecter pour publier un commentaire.