1

我有一些 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 的选择器不可行，只需找到 str_offset 的位置，编写 HTML，然后找到结束位置并关闭标签即可。

`

4

2 回答 2

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()方法时，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 没有）因为重叠。

于 2012-07-10T01:37:11.023 回答
0

看看这段代码：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);
}
于 2012-07-10T01:15:39.550 回答