JavaScript使用前缀树(trie树)实现文本高亮

 更新时间:2024年04月25日 10:43:57   作者:weixin_47806733  
这篇文章主要为大家详细介绍了JavaScript如何使用前缀树(trie树)实现文本高亮效果,文中的示例代码讲解详细,有需要的小伙伴可以参考下

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

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

异同点:

命名差异:字典树和前缀树是同一种数据结构,只是不同的命名方式而已。

数据结构:字典树/前缀树是一个多叉树,其中每个节点代表一个字符,从根节点到叶子节点的路径表示一个完整的字符串。

字符串存储:字典树/前缀树适用于存储大量字符串,并能高效地进行插入、删除、搜索等操作。

前缀匹配:字典树/前缀树的主要优势在于支持按前缀搜索,能够快速找到所有以某个前缀开头的字符串。

总结来说,字典树和前缀树并没有本质上的区别,只是在命名上有所差异。它们都是一种用于高效存储和处理字符串集合的数据结构,特别适用于前缀搜索等操作。

使用前缀树(也称为Trie树)来实现文本高亮有以下几个步骤:

构建前缀树:将需要高亮的关键词构建成前缀树。每个节点代表一个字符,从根节点开始,通过边连接到下一个字符节点。叶子节点表示一个完整的关键词。

遍历文本:遍历待高亮的文本,逐个字符进行匹配。

匹配过程:从根节点开始,逐个字符匹配。如果当前字符在前缀树中有对应的子节点,则继续向下匹配;如果没有匹配到子节点,说明不是关键词的一部分,跳到下一个字符

高亮处理:当匹配到某个关键词的叶子节点时,记录该位置并标记为需要高亮。继续匹配下一个字符,直到文本遍历完成。

高亮展示:根据标记的位置信息,在文本中添加相应的HTML标签或CSS样式来实现高亮效果。

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

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 函数接受文本和关键词作为输入,使用前缀树来实现文本高亮。最后,将高亮文本作为结果返回。

方法补充

除了上文的方法,小编还为大家整理了使用前缀树/字典树/trie树实现文本高亮的方法,需要的可以参考下

示例代码

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

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

  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;
  }

  highlightText(text, highlightClass = 'highlight') {
    const result = [];
    let currentWord = '';
    let currentNode = this.root;

    for (const char of text) {
      currentWord += char;
      // console.log(currentWord, 'currentWord')
      if (currentNode.children.has(char)) {
        currentNode = currentNode.children.get(char);
        console.log(currentNode, 'currentNode')
        if (currentNode.isEndOfWord) {
          result.push(`<span class="${highlightClass}">${currentWord}</span>`);
          currentWord = '';
          currentNode = this.root;
        }
      } else {
        result.push(currentWord);
        currentWord = '';
        currentNode = this.root;
      }
    }
    if (currentWord) {
      result.push(currentWord);
    }
    return result.join('');
  }
}


// 调用示例
const text = "This is a sample text to highlight certain words.";
const keywords = "words";
let trie = new Trie();
trie.insert(keywords);
console.log(trie.root);
console.log(trie.highlightText(text));

到此这篇关于JavaScript使用前缀树(trie树)实现文本高亮的文章就介绍到这了,更多相关JavaScript文本高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS 中可以提升幸福度的小技巧(可以识别更多另类写法)

    JS 中可以提升幸福度的小技巧(可以识别更多另类写法)

    本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新
    2018-07-07
  • webpack自动化打包方式详解

    webpack自动化打包方式详解

    这篇文章主要介绍了webpack自动化打包的相关知识,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-02-02
  • JavaScript中的prototype使用说明

    JavaScript中的prototype使用说明

    在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
    2010-04-04
  • 获取3个数组不重复的值的具体实现

    获取3个数组不重复的值的具体实现

    先用concat拼接数组 ,再使用一个对象、一个新数组(用于存放不重复的数组)具体实现如下,感兴趣的朋友可以参考
    2013-12-12
  • js实现无需数据库的县级以上联动行政区域下拉控件

    js实现无需数据库的县级以上联动行政区域下拉控件

    县级以上联动行政区域下拉控件,想必大家对此也有所熟悉,本文为大家介绍下使用js实现无需数据库的联动下拉控件,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • bootstrap组件之导航组件使用方法

    bootstrap组件之导航组件使用方法

    Bootstrap 中的导航组件都依赖同一个 .nav 类和ul,状态类也是共用的。改变修饰类可以改变样式。接下来通过本文给大家介绍bootstrap 导航组件使用方法,一起看看吧
    2017-01-01
  • JavaScript学习教程之cookie与webstorage

    JavaScript学习教程之cookie与webstorage

    这篇文章主要给大家介绍了关于JavaScript学习教程之cookie与webstorage的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 微信小程序实现定位及到指定位置导航的示例代码

    微信小程序实现定位及到指定位置导航的示例代码

    这篇文章主要介绍了微信小程序实现定位及到指定位置导航的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 将JSON字符串转换成Map对象的方法

    将JSON字符串转换成Map对象的方法

    下面小编就为大家带来一篇将JSON字符串转换成Map对象的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 由浅入深讲解Javascript继承机制与simple-inheritance源码分析

    由浅入深讲解Javascript继承机制与simple-inheritance源码分析

    Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧,对javascript继承相关知识感兴趣的朋友一起看看吧
    2015-12-12

最新评论