jQuery或Javascript：按字符偏移量和长度查找HTML文本

我有一些JSON:

{“div_id”：“pie1”，“str_offset”：“5”，“str_length”：“6”}

我有以下HTML：

<div id="pie1">I like pie!</div>

我喜欢馅饼！

我希望能够在匹配文本周围包装一个

元素，即从文本节点开始的5个字符开始的6个文本字符。因此，在本例中，它将包装为“e派！”。理想情况下，该解决方案将忽略任何其他标记的存在，例如

I like pie并仅统计文本字符

如果类似jQuery的选择器不可行，只需找到str_偏移量的位置，编写HTML，然后找到结束位置并关闭标记就可以了

`
请查看以下代码：

使用
wrapText（元素5,6）从位置5开始换行六个字符

使用
wrapText（elem，elem.textContent.length-6,6）
以换行最后六个字符

它将忽略HTML标记（副作用：最终不会出现HTML标记）

代码如下：

function wrapText(elem, start, length) {
    var before = elem.textContent.substr(0, start);
    var after = elem.textContent.substr(start + length, elem.textContent.length - length);
    var letters = elem.textContent.substr(start, length);
    elem.innerHTML = '';
    var text1=document.createTextNode(before);
    var text2=document.createElement('span');
    text2.style.backgroundColor='red';
    text2.innerHTML = letters;
    var text3=document.createTextNode(after);
    elem.appendChild(text1);
    elem.appendChild(text2);
    elem.appendChild(text3);
}

请查看以下代码：

使用
wrapText（元素5,6）从位置5开始换行六个字符

使用
wrapText（elem，elem.textContent.length-6,6）
以换行最后六个字符

它将忽略HTML标记（副作用：最终不会出现HTML标记）

代码如下：

function wrapText(elem, start, length) {
    var before = elem.textContent.substr(0, start);
    var after = elem.textContent.substr(start + length, elem.textContent.length - length);
    var letters = elem.textContent.substr(start, length);
    elem.innerHTML = '';
    var text1=document.createTextNode(before);
    var text2=document.createElement('span');
    text2.style.backgroundColor='red';
    text2.innerHTML = letters;
    var text3=document.createTextNode(after);
    elem.appendChild(text1);
    elem.appendChild(text2);
    elem.appendChild(text3);
}

从假设div不包含任何子元素的简单示例开始，您可以这样做：

function wrapText(id, offset, length){
    $("#"+id).html(function(i,oldHtml) {
        return oldHtml.substr(0,offset) +
               "<span>" +
               oldHtml.substr(offset, length) +
               "</span>" +
               oldHtml.substr(offset + length);
    });
}
wrapText("pie1",5,6);   // obviously use values from your JSON here

在这个演示中，您可以看到：上面生成的html在“正确”的位置有span标记，但当浏览器实际显示它时，由于重叠，它不喜欢它（至少Firefox不喜欢）。
从一个简单的示例开始，我们假设div不包含任何子元素，您可以这样做：

function wrapText(id, offset, length){
    $("#"+id).html(function(i,oldHtml) {
        return oldHtml.substr(0,offset) +
               "<span>" +
               oldHtml.substr(offset, length) +
               "</span>" +
               oldHtml.substr(offset + length);
    });
}
wrapText("pie1",5,6);   // obviously use values from your JSON here

在这个演示中，您可以看到：上面生成的html在“正确”的位置有span标记，但当浏览器实际显示它时，由于重叠，它不喜欢它（至少Firefox不喜欢）。
在突出显示中选择as，或在换行中选择as？我想换行。为清晰起见进行了编辑。里面是否有其他元素（如
我喜欢饼状图
）或只是纯文本？可能还有其他元素，但我不想将它们包含在字符计数中。为清晰起见，再次编辑。：）尽管我意识到这可能会导致标签重叠。请尝试编写一些代码。首先要从对象中提取三个参数。jQuery是一个不错的选择。在突出显示中选择as，或者在包装中选择as？我想包装它。为清晰起见进行了编辑。里面是否有其他元素（如
我喜欢饼状图
）或只是纯文本？可能还有其他元素，但我不想将它们包含在字符计数中。为清晰起见，再次编辑。：）尽管我意识到这可能会导致标签重叠。请尝试编写一些代码。首先要从对象中提取三个参数。jQuery是一个不错的选择。@shaquitrifonoff-如果您正在谈论第二段代码，请仔细看看第二个演示。只有一个字母是黄色的，因为生成的html有重叠的标记，浏览器不喜欢它。这就是为什么我的演示还包括一个显示实际html的
警报（）
——您可以看到原始的
和
标记被保留。在一个不产生重叠标签的测试中，这很好，但是OP在评论中说，他知道这个过程可能会产生重叠标签，所以我特意把它放在演示中…我现在明白了。它会创建无效的嵌套标记。您必须添加额外的代码以避免出现
：-）
@shaquitrifonoff-如果您正在讨论第二段代码，请仔细查看第二个演示。只有一个字母是黄色的，因为生成的html有重叠的标记，浏览器不喜欢它。这就是为什么我的演示还包括一个显示实际html的
警报（）
——您可以看到原始的
和
标记被保留。在一个不产生重叠标签的测试中，这很好，但是OP在评论中说，他知道这个过程可能会产生重叠标签，所以我特意把它放在演示中…我现在明白了。它会创建无效的嵌套标记。您必须添加额外的代码以避免出现这种情况
：-）