突出显示字符串中的多个子字符串——javascript / jquery

Question

tldr：如何突出显示 javascript 字符串变量中的多个子字符串（可能使用黑色文本可读的不同颜色）？模拟所需输出：

加长版

我有一些文字的跨度：

<span>This is some text, there are lots of things in here. </span>

我还有一个包含要突出显示的子字符串的哈希：

h = {"t0": [0,2], "t1" : [8,15]}

我想突出显示给定子字符串数组的散列开始和结束的文本。它看起来像这样：

这个s是some text，这里有很多东西。

我想过使用html标签，但我不知道如何同时替换所有子字符串：

累积尝试

第一次迭代

<tag1>Thi</tag1>s is some text, there are lots of things in here.

第二次迭代

<tag1>Th<tag2>i</tag1</tag2>>s is some text, there are lots of things in here.
        ^ this is where the new 8th index is

顺序尝试

如果我使用原始值，我不知道如何将结果相加：

第一次迭代

<tag1>Thi</tag1>s is some text, there are lots of things in here.

第二次迭代

This is <tag2>some tex</tag2>t, there are lots of things in here.

太棒了！但是如何将它们加在一起？

编辑：

标签可以很好地嵌套：

<tag1>hello <tag2>world</tag2></tag1>

不是我的正常用例，但我想它可能会发生。即使它只是用工具提示突出显示，我猜这也会有帮助吗？

Answer 1

看看我放在一起的这个函数。看到它在这个JSFiddle 中工作

HTML

<span class="texttohighlight">This is some text, there are lots of things in here.</span>

JQuery/Javascript

var hash = {"t0": [0,2], "tabtest" : [4,8], "t1" : [9,25]};

highlightWords(hash);

function highlightWords(hash) {
    var offset = 0;
    var original;

    $.each(hash, function(key, val) {
        original = $(".texttohighlight").html();
        var length = original.length;
        var before = original.substring(0,val[0]+offset);
        var replace = original.substring(val[0]+offset, val[1]+offset);
        var after = original.substring(val[1]+offset,length);
        var final = before + "<span class='"+key+"'>" + replace + "</span>" + after;
        offset += 22 + key.length;
        $(".texttohighlight").html(final);
    });
}

CSS

.t0 {
   background:#00ff00;
}

.t1 {
    background:#00ffff;
}

.tabtest {
    background:#ccc;
}

它使用 JQuery 并根据散列中的数字创建 span 元素。跨度获取关键的类。

"t0": [0,2] 将创建

<span id="t0">Th</span>

一些注意事项：

• 不能重叠。重叠时html标签不起作用，颜色也不起作用

• 嵌套标签不起作用，您可能会添加一些条件逻辑并根据是否在之前或之后添加附加代码来更新哈希表，但您确实提到嵌套元素不是您的正常用例所以为了简单起见，我只是将它添加到循环中

• 您必须按照子字符串出现的顺序列出它们。

示例：

• {“t0”：[0,2]，“tabtest”：[4,8]，“t1”：[9,25]}；有效

• {"tabtest" : [4,8], "t0": [0,2], "t1" : [9,25]};不会工作

这是因为我们在子串数字上添加了一个偏移量来补偿额外的字符。