突出显示文本中特定单词的出现

Question

I am trying to highlight a specific occurrence of a word in a text using jquery/js. Trying to find out if there are any existing libraries I can use. I read about mark.js but it does not offer the functionality I need. Example Text: "In a home, there is a room, the room has a door"
Highlight word: "room"
Occurrence: 2 The second "room" in the text needs to be highlights.
Please suggest. Thanks!

Answer 1

Just pass in the specific index of the token (character sequence you are looking for) to a function that takes the string, token, and index as parameters. You can now use the 2nd parameter of indexOf to update the beginning of where the string will be searched from using the last result:

 const highlighter = (string, token, index) => { let n = -1 for (let i = 0; i <= index; i++) { n = string.indexOf(token, n + 1) } return string.slice(0, n) + string.slice(n).replace(token, '<span class="highlight">' + token + '</span>') } const text = 'In a home, there is a room, the room has a door.<br>' const firstRoom = highlighter(text, 'room', 0) const secondRoom = highlighter(text, 'room', 1) $('#result').append(firstRoom) $('#result').append(secondRoom)

 .highlight { background-color: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="result"></div>

The -1 is important since this function would otherwise miss the first token occurence if it appears at the start of the string.

Answer 2

 // To replace all (commented out so it doesn't interfere with the other one) /* var p = document.getElementById("text"); // Gets the <p> var text = p.innerText; // Gets the text it contains var wordToReplace = "room"; // Which word should be replaced var newtext = text.replaceAll(wordToReplace, '<span class="highlight">' + wordToReplace + '</span>'); // Replaces the word with the word wrapped in <span> tags, so it will look highlighted p.innerHTML = newtext; // Change it back */ // To replace specific occurences var paragraph = document.getElementById("text"); // Gets the <p> var txt = paragraph.innerText; // Gets the text it contains var textToReplace = 'room' // Word to be replaced var replace = RegExp(textToReplace, 'g'); var matches = txt.matchAll(replace); // Gets all places where the text matches the word var replacementPositions = [0, 2]; // Occurences which should be highlighted var i = 0; // Which match this is; starts at 0 for (const match of matches) { // For each match... var text = match[0]; // The matching text var start = match.index; // Start position var end = match.index + text.length; // End position if (replacementPositions.includes(i)) { // If it should be replaced (in the replacementPositions array) var startText = txt.substring(0, start - 1); // Text before match var endText = txt.substring(start); // Text after match endText = endText.substring(text.length); // Removes matching text from the text after the match txt = startText + '<span class="highlight">' + text + '</span>' + endText; // Insert the match back in, wrapped in a <span> } i++; // Increment } paragraph.innerHTML = txt; // Set the paragraph text back

 .highlight { background-color: yellow; }

 <p id="text">First: room. Another one: room. Last time: room</p>

The first method detects all occurrences of the word and wraps them in a <span> . The <span> has a style that sets the background color of the text, so it looks 'highlighted'.

The second method goes through every occurrence of the word and checks if it should be highlighted. If so, it does some operations that wrap that occurrence in a <span> , like the method above.

Answer 3

You could do it like this:

 let text = "In a home, there is a room, the room has a door."; let search = "room"; var n = text.lastIndexOf(search); text = text.slice(0, n) + text.slice(n).replace(search, "<span class='highlight'>" + search + "</span>"); $("#result").append(text);

 .highlight { color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="result"> </div>