Question

我有一些JSON：{"div_id":"pie1","str_offset":"5","str_length":"6"}

我有以下HTML：

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

我希望能够在匹配的文本周围包含<span>元素，即从文本节点的开头起5个字符长的6个文本字符。所以在这个例子中它将包装“e pie！”。理想情况下，解决方案会忽略任何其他标记的存在，例如I like <b>pie!</b>并且只计算文本字符。

如果jQuery like selector不可行，只需找到str_offset的位置，编写HTML，然后找到结束位置并关闭标记即可。

`

Answer 1

从我们假设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

演示：http://jsfiddle.net/TfAAC/

当你使用回调函数调用jQuery的.html() method时，jQuery使用当前的html文本调用你的函数并返回新值。

如果div中有子元素，则以下更复杂的代码“有效”，但在插入span标记时可能会创建重叠标记：

function wrapText(id, offset, length){
    $("#"+id).html(function(i,oldHtml) {
        var i, c, spanStart, spanStop;
        for (i = 0, c = 0; i < oldHtml.length; i++) {
            if (c === offset)
               spanStart = i;
            else if (c === offset+length) {
               spanStop = i;
               break;
            }
            if (oldHtml.charAt(i) === "<"){
               while (++i < oldHtml.length && oldHtml.charAt(i) != ">" && oldHtml.charAt(i+1) != "<");
            }else
               c++;
        }        
        if (spanStart === undefined)
           return oldHtml;
        if (spanStop === undefined)
           spanStop = oldHtml.length;
        return oldHtml.slice(0, spanStart) +
               "<span>" + oldHtml.slice(spanStart, spanStop) + "</span>" +
               oldHtml.slice(spanStop);
    });
}

你可以在这个演示中看到：http://jsfiddle.net/TfAAC/1/上面生成的html在“正确”的位置有span标签，但是当浏览器实际显示它时它不喜欢它（至少，Firefox）没有）因为重叠。

Answer 2

看一下这段代码：http://jsfiddle.net/5J93b/4/

使用wrapText(elem, 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);
}

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

2 个答案: