Question

在JavaScript中，通过给出带有以下标签的html字符串：此 字符串有不同的 字体。

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

当用户搜索包含多个单词的搜索字词时，例如＆＃34;不同字体＆＃34;。

如何添加突出显示以使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>.

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

Answer 1

在Javascript中使用innerHTML + str.replace

首先在内容旁边放置一个div。

<div id='content'>

在Javascript中将内容设置为变量。

var xyz = document.getElementById("content").innerHTML;

将用户搜索扩展到数组并使用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]);

}

将替换文字设置为：

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

要保持连续，请浏览xyz字符串并用3个字符替换替换span标记：

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

然后使用indexOf遍历字符串。如果存在一个具有前一个split array.length + 7的索引的split数组，那么你知道它是连续的。 7来自单词之间的空格+你为开始和结束跨度所做的3个字符替换：7 = 3 + 1 + 3

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

我把“在这里创建你的循环”你需要循环，这样你就可以找到你的字符串的多次出现（indexOf只得到第一个，这就是为什么我们使用countR变量来避免以前的搜索）。 “好到目前为止”的评论是继续这种相同的循环风格，这个循环只处理2个单词“不同的字体”如果有3个像“有不同的字体”那么你需要一个每个单词计数的循环 - ＆gt ;

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~

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

1 个答案: