0

要素内のいくつかの文字をスパンで囲みたいと思います。

例えば： <div>Some random string</div>;

そして、javascript がランダムに "m" を "random" に、"r" を文字列に選択する場合。これになりたい： <div>Some rando<span>m</span> st<span>r</span>ing</div>

jQueryの置換なしでどうすればいいですか?

ネイティブ置換は元の文字列を変更せず、変更された文字列で元の文字列を上書きするだけで、要素の他のスタイルが削除されます。私もinsertNodeで調査しましたが、役に立ちませんでした。

4

3 に答える 3

0

これは役立ちますか：

それらを生成2 random numbersしてスパンでラップし、希望する結果を得ました。

http://jsfiddle.net/Gkkbb/2/

于 2013-03-20T05:49:30.447 に答える
0

innerHTML 内に span タグのみを追加する場合は、すべてのスタイルを維持する必要があります (重要なサブ要素がない限り)。

仮定して：

  • div にサブ要素がありません
  • テキスト コンテンツ自体は html セーフです
  • ラップしたい文字のインデックスを見つける方法があります

（あなたの例ではすべての仮定が正しいようです）

元の文字列を変換して .html() で再注入できます

気になるインデックスをどのように選択するかはわかりませんが、それはあなたに任せますが、繰り返しますが、前述の仮定の範囲内で、次のようにすることができます。

var my_div = $('some_selector_goes_here');
var original = my_div.text();

var indexes = find_the_indexes(original);

var updated = '', cur_idx = 0;
for (var idx=0; idx<indexes.length; idx++)
{
    var index = indexes[idx];
    updated += original.substr(cur_idx, index);
    updated += '<span>' + original.charAt(index) + '</span>';
    cur_idx = index + 1;
}
updated += original.substr(cur_idx);

my_div.html(updated);
于 2013-03-20T05:49:58.613 に答える
0

この例を参照してください..必要に応じて編集してください..

<div id='div'>Some random string</div>


<script>
var div = document.getElementById('div');
var OurString = div.innerHTML.split(' '); // array containing words of div
var StringToFind = 'random',CharToFind = 'm';
var span = document.createElement('span');
div.innerHTML = '';
for(var i=0;i<OurString.length;i++)
{
if(StringToFind == OurString[i])
{
div.innerHTML += OurString[i].substring(0,OurString[i].indexOf(CharToFind));
div.appendChild(span);
span.innerHTML = CharToFind;
div.innerHTML += OurString[i].substring(OurString[i].indexOf(CharToFind) + 1,OurString[i].length);
}
else
div.innerHTML += OurString[i];
div.innerHTML = ' ';
}
</script>
于 2013-03-20T05:52:58.713 に答える