Question

我正在尝试使用jquery / js突出显示文本中单词的特定出现。尝试找出是否有我可以使用的现有库。我阅读了有关mark.js的信息，但它没有提供我需要的功能。示例文本：“在家里，有一个房间，这个房间有一扇门”
突出显示字词：“房间”
发生：2 文本中的第二个“房间”需要突出显示。
请提出建议。谢谢！

Answer 1

只需将令牌的特定索引（您要查找的字符序列）传递给将字符串，令牌和索引作为参数的函数。现在，您可以使用indexOf的第二个参数来更新从最后一个结果开始搜索字符串的起点：

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很重要，因为如果该函数出现在字符串的开头，否则它将丢失第一次出现的令牌。

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>

第一种方法检测所有出现的单词并将其包装在<span>中。 <span>的样式可以设置文本的背景颜色，因此看起来“突出显示”。

第二种方法遍历单词的每次出现，并检查是否应突出显示该单词。如果是这样，它会像上面的方法一样，将出现的事件包装在<span>中。

Answer 3

您可以这样做：

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>

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

3 个答案: