如何使用前缀树（也称为Trie树）来实现文本高亮

如何使用前缀树（也称为Trie树）来实现文本高亮

前缀树类似字典树，二者是相似的数据结构。它们的名称不同，但指的是相同的概念。字典树是用来存储和处理字符串集合的树状数据结构，它在某些情况下也被称为前缀树。

异同点：

命名差异：字典树和前缀树是同一种数据结构，只是不同的命名方式而已。
数据结构：字典树/前缀树是一个多叉树，其中每个节点代表一个字符，从根节点到叶子节点的路径表示一个完整的字符串。
字符串存储：字典树/前缀树适用于存储大量字符串，并能高效地进行插入、删除、搜索等操作。
前缀匹配：字典树/前缀树的主要优势在于支持按前缀搜索，能够快速找到所有以某个前缀开头的字符串。
总结来说，字典树和前缀树并没有本质上的区别，只是在命名上有所差异。它们都是一种用于高效存储和处理字符串集合的数据结构，特别适用于前缀搜索等操作。

力扣字典树练习

使用前缀树（也称为Trie树）来实现文本高亮有以下几个步骤：

• 构建前缀树：将需要高亮的关键词构建成前缀树。每个节点代表一个字符，从根节点开始，通过边连接到下一个字符节点。叶子节点表示一个完整的关键词。
• 遍历文本：遍历待高亮的文本，逐个字符进行匹配。
• 匹配过程：从根节点开始，逐个字符匹配。如果当前字符在前缀树中有对应的子节点，则继续向下匹配；如果没有匹配到子节点，说明不是关键词的一部分，跳到下一个字符
• 高亮处理：当匹配到某个关键词的叶子节点时，记录该位置并标记为需要高亮。继续匹配下一个字符，直到文本遍历完成。
• 高亮展示：根据标记的位置信息，在文本中添加相应的HTML标签或CSS样式来实现高亮效果。

下面是一个简单的示例代码，用于演示使用前缀树实现文本高亮：

```javascript
class TrieNode {
  constructor() {
    this.children = new Map();
    this.isEndOfWord = false;
  }
}

class Trie {
  constructor() {
    this.root = new TrieNode();
  }

  insert(word) {
    let currentNode = this.root;

    for (let i = 0; i < word.length; i++) {
      const char = word[i];
      if (!currentNode.children.has(char)) {
        currentNode.children.set(char, new TrieNode());
      }
      currentNode = currentNode.children.get(char);
    }

    currentNode.isEndOfWord = true;
  }

  search(word) {
    let currentNode = this.root;

    for (let i = 0; i < word.length; i++) {
      const char = word[i];
      if (currentNode.children.has(char)) {
        currentNode = currentNode.children.get(char);
      } else {
        return false;
      }
    }

    return currentNode.isEndOfWord;
  }
}

function highlightText(text, keywords) {
  const trie = new Trie();
  for (const keyword of keywords) {
    trie.insert(keyword);
  }

  let highlightedText = "";
  let currentWord = "";

  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    currentWord += char;

    if (trie.search(currentWord)) {
      highlightedText += `<span class="highlight">${currentWord}</span>`;
      currentWord = "";
    } else if (!trie.search(currentWord) && trie.search(currentWord.slice(0, currentWord.length - 1))) {
      highlightedText += currentWord.slice(0, currentWord.length - 1);
      currentWord = char;
    }
  }

  // 处理最后一个单词
  if (currentWord !== "") {
    highlightedText += currentWord;
  }

  return highlightedText;
}

// 调用示例
const text = "This is a sample text to highlight certain words.";
const keywords = ["sample", "highlight", "words"];
const highlightedText = highlightText(text, keywords);
console.log(highlightedText);

上述代码定义了 TrieNode 和 Trie 类，用于构建前缀树，并提供了 insert 和 search 方法。然后，highlightText 函数接受文本和关键词作为输入，使用前缀树来实现文本高亮。最后，将高亮文本作为结果返回。

~~复杂需求待办~~