文本中的 Javascript 单词突出显示

Javascript word highlighting in a text

本文关键字：显示 单词突 Javascript 文本      更新时间：2023-09-26

我在Javascript中有一个名为output的变量，它有以下内容。

var output = "something."

我想在显示输出内容时搜索并突出显示其中的单词"word1"和"word2"。以上内容是动态的。假设我有一个包含文本的变量输出和一个名为 arr1 的数组，其中包含要搜索和突出显示的元素，我如何显示整个内容并在 javascript 中突出显示单词？请让我知道。提前谢谢。

假设你想要的文字短语通常只是单词（没有特殊字符或标点符号），你可以使用类似于下面的正则表达式（我还添加了不区分大小写）：

var output = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
var arr1 = ['eiusmod tempor', 'consectetur'];
var regex = new RegExp('('+arr1.join('|')+')', 'gi');
output = output.replace(regex, "<b>$1</b>");
// the following line is for debug purposes only. I've added it
// to better display what's happening just for the Stackoverflow
// code snippet editor.
document.body.innerHTML = output;
b {
  background: yellow;
  font-weight: normal;
}

编辑：

快速编辑以包含确保"consectrtur"匹配但"consecteturs"不匹配的逻辑。 它只需要一个简单的前视(?!''w)和"看后看"（不是真正的后看，因为javascript不支持它(''W+|^)），以确保匹配的术语不会被单词字符包围，因此不是不同单词的一部分。

var output = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse consecteturs cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";
var arr1 = ['eiusmod tempor', 'consectetur', 'orem', 'laborum'];
var regex = new RegExp('(''W+|^)('+arr1.join('|')+')(?!''w)', 'gi');
output = output.replace(regex, "$1<b>$2</b>");
// the following line is for debug purposes only. I've added it
// to better display what's happening just for the Stackoverflow
// code snippet editor.
document.body.innerHTML = output;
b {
  background: yellow;
  font-weight: normal;
}

您可以使用<span>标签将要突出显示的单词包装起来，然后在标签中添加类或内联样式以获得突出显示颜色。 这将要求您标识要突出显示的单词，并使用 String.replace（word， tag + word + closing_tag） 或类似内容在开始标记之前和之后添加结束标记。

要使用Javascript在HTML中包装某些内容，您应该查看Regex。 例如： 

str = str.replace(/(neoplasm)/ig, "<b>$1</b>");

要从数组中替换，您可以执行一些操作，例如使用正则表达式 OR： 将字符串与join连接起来，|生成自定义正则表达式字符串，匹配这些单词。

编辑：就像约瑟夫刚刚建议的那样，就在我面前一分钟。

相关文章：