Quelqu'un peut-il m'aider avec une fonction javascript qui peut mettre en évidence du texte sur une page web. L'exigence est de ne mettre en évidence qu'une seule fois, et non pas de mettre en évidence toutes les occurrences du texte comme nous le faisons dans le cas d'une recherche.
Réponses
Trop de publicités?
Henrique Donati
Points
156
Je me demandais ça aussi, tu pourrais essayer ce que j'ai appris sur ce poste.
J'ai utilisé :
function highlightSelection() {
var userSelection = window.getSelection();
for(var i = 0; i < userSelection.rangeCount; i++) {
highlightRange(userSelection.getRangeAt(i));
}
}
function highlightRange(range) {
var newNode = document.createElement("span");
newNode.setAttribute(
"style",
"background-color: yellow; display: inline;"
);
range.surroundContents(newNode);
}
<html>
<body contextmenu="mymenu">
<menu type="context" id="mymenu">
<menuitem label="Highlight Yellow" onclick="highlightSelection()" icon="/images/comment_icon.gif"></menuitem>
</menu>
<p>this is text, select and right click to high light me! if you can`t see the option, please use this<button onclick="highlightSelection()">button </button><p>vous pouvez également l'essayer ici : http://henriquedonati.com/projects/Extension/extension.html
xc
Murad
Points
61
Si vous entourez un texte à l'intérieur de la balise mark, il sera automatiquement mis en évidence par le navigateur dans cette couleur jaune frappante. Les détails sont disponibles ici : https://dev.to/comscience/highlight-searched-text-on-a-page-with-just-javascript-17b3
<h1>
Searching and Marking
</h1>
<input type="text" id="search"/>
<button onClick="search(id)" id="button">
Highlight
</button>
<p id="text">
What exactly is this Worker thread module, and why do we need it? In this post, we will talk about the historical reasons concurrency is implemented in JavaScript and Node.js, the problems we might find, current solutions, and the future of parallel processing with Worker threads.
Living in a single-threaded world
JavaScript was conceived as a single-threaded programming language that ran in a browser. Being single-threaded means that only one set of instructions is executed at any time in the same process (the browser, in this case, or just the current tab in modern browsers).
This made things easier for implementation and for developers using the language. JavaScript was initially a language only useful for adding some interaction to webpages, form validations, and so on — nothing that required the complexity of multithreading.
</p>Maintenant, le code JS ressemblera à ceci
function search(e) {
let searched = document.getElementById("search").value.trim();
if (searched !== "") {
let text = document.getElementById("text").innerHTML;
let re = new RegExp(searched,"g"); // search for all instances
let newText = text.replace(re, `<mark>${searched}</mark>`);
document.getElementById("text").innerHTML = newText;
}
}
Dante Valenzuela
Points
9
Sur cybernétique : Merci, la fonction ci-dessous fonctionne. Mais il y a un problème car elle remplace aussi les mots à l'intérieur des balises. Voici un exemple si le mot à mettre en évidence est target :
<a <mark>target</mark>="_blank" href="Its not OK to highlight <mark>target</mark> here">Its OK to highlight the words <mark>target</mark>s here</a>Comment éviter cela ?
function highlight_words(word) {
const page = document.body.innerHTML;
document.body.innerHTML = page.replace(new RegExp(word, "gi"), (match) => `<mark>${match}</mark>`);
}
arhoskins
Points
352
Utilisation de la surroundContents() sur la méthode Gama type. Son seul argument est un élément qui enveloppera cette plage.
function styleSelected() {
bg = document.createElement("span");
bg.style.backgroundColor = "yellow";
window.getSelection().getRangeAt(0).surroundContents(bg);
}- Réponses précédentes
- Plus de réponses
5 votes
Si vous postez le code de la fonction, nous pourrons vous aider. Si vous nous demandez de créer une telle fonction pour vous... c'est moins probable. Vous devez faire quelque chose par vous-même. Commencez à faire quelque chose et revenez quand vous êtes bloqué.
7 votes
Oui, j'ai lu How to Ask et j'ai fait quelque chose par moi-même, mais je suis resté bloqué et c'est pourquoi j'ai demandé. Je travaille sur Android et j'ai peu de connaissances en javasript, c'est pourquoi je ne suis pas en mesure de le faire moi-même. Auparavant, j'utilisais un autre javascript qui faisait le travail mais pas sans certaines limitations. Je n'ai peut-être pas utilisé les bons mots en posant cette question et j'en suis désolé, mais s'il vous plaît, ne pensez pas le contraire.
1 votes
Ce plugin peut vous intéresser : github.com/julmot/jmHighlight . Il peut mettre en évidence les mots clés séparément ou en tant que terme, peut mettre en évidence la correspondance avec votre élément personnalisé et votre nom de classe et peut également rechercher les diacritiques. En outre, il vous permet de filtrer le contexte dans lequel vous recherchez des correspondances.
1 votes
Vérifier la méthode regex suivante... stackoverflow.com/a/45519242/2792959
0 votes
J'ai préparé un article à ce sujet ici, exhesham.com/2017/11/20/…