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 には「適切な」場所にスパンタグがありますが、ブラウザーが実際にそれを表示すると、それは好きではありません (少なくとも、Firefox はそうではありません) オーバーラップのためです。

于 2012-07-10T01:37:11.023 に答える
0

このコードを見てください: http://jsfiddle.net/5J93b/4/

wrapText(elem, 5, 6);位置 5 から始まる 6 文字をラップするために使用します。

wrapText(elem, elem.textContent.length - 6, 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 に答える