突出显示文本中特定的词语

Question

我想用jqueryjs来高亮显示文本中某个单词的特定出现。试图找出是否有任何现有的库，我可以使用。我读过mark.js，但它没有提供我所需要的功能。示例文本。"在一个家里，有一个房间，房间有一扇门 "高亮字："房间 "出现次数：2文中第二个 "房间 "需要高亮。请提出建议。谢谢

Answer 1

只要将token（你要找的字符序列）的特定索引传给一个函数，该函数将字符串、token和索引作为参数。现在你可以使用indexOf的第2个参数来更新字符串的起始位置，并使用最后的结果来搜索。

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>

-1是很重要的，因为如果第一个token出现在字符串的开头，这个函数就会错过它。

Answer 2

你可以这样做。

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>

Answer 3

// 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>

第一个方法检测单词的所有出现点，然后将它们包裹在一个... <span>. 该 <span> 有一个样式，可以设置文本的背景颜色，使其看起来 "高亮"。

第二种方法会检查这个词的每一个出现，并检查它是否应该被高亮显示。如果是的话，它就会进行一些操作，将该词的出现包裹在一个叫做 <span>，就像上面的方法。