J'ai une tâche. J'ai besoin de mettre en évidence des mots spécifiques dans le HTML de revenu. Pour trouver le mot exact dont j'ai besoin, utilisez ses coordonnées. Les coordonnées sont calculées en fonction de la position de la première et de la dernière lettre du mot dans la chaîne.
Exemple
J'ai une telle constante
const testString: string = 'some some some text some some text';
const keyWord: string= 'text';
const regexRule: any = new RegExp(keyWord, 'g');
const result: string = testString.replace(regexRule, `<span class="some">${keyWord}</span>`);
console.log(result);
Je dois surlignez le mot texte .
Ses coordonnées sont [28,31] - car le premier t est à la position 28 dans la chaîne et le dernier t est à la position 31 .
J'ai découvert comment le faire avec regex.
const exmpleString: string = `<h1>Name</h1> <p>Some some, text some.</p>`;
Fonctionne très bien mais j'ai besoin d'une autre solution.
3 Réponses :
Obtenez les coordonnées comme testString.indexOf (keyWord) et testString.indexOf (keyWord) + keyWord.length .
Puis splice.
Ou remplacez simplement
testString.replace(keyWord, `<span class="some">`+keyWord+`</span>`)
Le problème dans cette solution est qu'elle ne fonctionne pas lorsque la chaîne à mettre en évidence contient des caractères HTML ", & lt" ~. vous pouvez le trouver dans ma question ici ou Vous pouvez utiliser mark.js - https://markjs.io/
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.10.0/mark.min.js"></script> <div class="context"> this is a test line used to explain mark.js </div>
var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark('line');
Il n'a besoin de mettre en évidence que des mots simples pour qu'il n'y ait pas de problème.
Je n'utilise pas TypeScript, j'écrirais donc une solution alternative à your and attersson en Javascript
const HighlightedText = (start, end, givenString) => {
let someString = givenString.split("")
let highlightedText = []
for (let i=start; i<=end; i++) {
highlightedText.push(someString[i+1])
}
return highlightedText
}
let HighlightText = HighlightedText(28, 31, "some some some text some some text")
console.log(HighlightText)
Et puis vous pouvez le mettre en évidence.
Ps: Je ne sais pas comment t est à la position 28
Merci) Mais comment puis-je mettre en évidence ce mot dans la chaîne d'origine?
Pourquoi ne souhaitez-vous pas utiliser la solution en utilisant une expression régulière?
si la chaîne a déjà un format HTML auparavant, vous devez considérer que le mot-clé peut apparaître à des endroits de la chaîne que vous ne pouvez pas ou ne souhaitez pas mettre en évidence. Par exemple, que se passe-t-il si le mot-clé est "div"? Ou que faire quand le mot-clé apparaît dans l'attribut title d'une balise ou dans un nom de fichier d'une image référencée etc.
Oui, tu as raison. La manière avec regex est excellente mais dans mon cas, le but est de l'éviter (