Question

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

var output = "something."

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

Answer 1

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

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”匹配的逻辑，但“consectetur s ”则不然。它只需要(?!\\w)前面的简单展望和(\\W+|^)后面的“后视”（因为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 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;
}

Answer 2

您可以使用<span>标记包含要突出显示的单词，然后在标记中为高亮颜色添加类或内联样式。这将要求您识别要突出显示的单词，并使用String.replace（单词，标记+单词+ closing_tag）或类似内容在标记之前和之后添加开始标记。

Answer 3

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

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

要从数组中替换，您可以执行类似的操作，例如使用正则表达式OR join连接字符串|以生成自定义正则表达式字符串，并匹配这些字词。

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

在文字中突出显示Javascript字词

3 个答案:

编辑：