Javascript 在html中搜索并突出显示多个关键字作为单个字符串

在JavaScript中，通过给定带有以下标记的html字符串： 这个字符串有不同的字体

这个
一串
有
不同的
字体。

当用户搜索具有多个单词（如“不同字体”）的搜索词时

如何添加突出显示以使html字符串看起来像：

<b>This</b>
<i>string</i>
<span style="background-color: rgb(212, 239, 181);">has</span>
<span class="highlight">
    <b>different</b>
    <i>fonts</i>
</span>.

这个
一串
有
不同的
字体
.

---

请注意，搜索词被视为单个字符串，就像单词在引号中一样，因此我无法单独搜索和突出显示每个单词。

在Javascript中使用innerHTML+str.replace

首先在内容周围放置一个div。

<div id='content'>

将用户搜索分解为一个数组，并使用Javascripts str.replace筛选内容变量。

var needle = document.getElementById("needle").innerHTML;
var splitArray = str.split(" ");
for (var i = 0; i < splitArray.length; i++) {
    /* code below mentioned later */
    xyz = str.replace("<span class='highlight'>" + splitArray[i] + "</span>", splitArray[i]);

}

我把“createyourlocophere”放在你想要的循环中，这样你就可以找到多个字符串（indexOf只得到第一个，这就是为什么我们使用countR变量来避免前面的搜索）。“到目前为止还不错”的评论是继续使用相同样式的循环，这个循环只处理2个单词“不同的字体”，如果有3个像“有不同的字体”，那么你需要一个循环，每个单词计数->

for (var q = 0; q < splitArray.length; q++) {
    if (q > 1) {
        if (replaceS.indexOf(splitArray[q] == (splitArray[q - 1].length + 7) {

        }
    }
} else {
    // use original code above with splitArray[1] and indxStr
}
// etc~

for（var q=0；q1）{
if（替换.indexOf（splitArray[q]==（splitArray[q-1].length+7）{
}
}
}否则{
//将上面的原始代码与splitArray[1]和indxStr一起使用
}
//等~

您是指浏览器内置的搜索还是您已经实现的搜索系统？您需要更清楚。我有一个后端进行搜索，并返回匹配的消息。客户端必须进行突出显示。我没有测试您的代码，但我认为它不符合我的要求，因为搜索词应该被视为单个字符串。在我的情况下，当用户搜索“不同字体”时，如果单词“不同”和“字体”不在一起，则不应单独突出显示。是否希望单词“不同”和“字体”在突出显示的顶部保留其粗体和斜体特征？是的，所有现有html标记都应保留。

var needle = document.getElementById("needle").innerHTML;
var splitArray = str.split(" ");
for (var i = 0; i < splitArray.length; i++) {
    /* code below mentioned later */
    xyz = str.replace("<span class='highlight'>" + splitArray[i] + "</span>", splitArray[i]);

}

"<span class='highlight'>" + /* needle (see above) */ + "</span>" 

var replaceS = xyz.replace("</span>", "~/S");
var replaceS = replaceS.replace("<span class='bold'>", "~/B");

var countR = 0;
// CREATE A LOOP HERE 
    var indxStr = replaceS.indexOf(splitArray[0],countR);
    if (replaceS.indexOf(splitArray[1] == (indxStr.length + 7) {
        // good so far!
    } else { 
        // get the previous index and add one to it (so that we do not repeat)
        countR = replaceS.indexOf(indxStr) + 1;
    }
// END YOUR LOOP HERE

for (var q = 0; q < splitArray.length; q++) {
    if (q > 1) {
        if (replaceS.indexOf(splitArray[q] == (splitArray[q - 1].length + 7) {

        }
    }
} else {
    // use original code above with splitArray[1] and indxStr
}
// etc~