如何使用javascript在字符周圍包裹元素

例如： <div>Some random string</div>;

然後，如果JavaScript的隨機選擇的「M」中的「隨機」和在串中的「R」。我想它成爲這樣的： <div>Some rando<span>m</span> st<span>r</span>ing</div>

我該怎麼做，沒有jQuery的替換？

本地替換不會更改原始字符串，只是用修改的字符串覆蓋原始字符串會將其他樣式移除到元素。我也調查過insertNode但沒有用。

2013-03-20 Hao Luo

看看http://letteringjs.com/。 – Blender 2013-03-20 05:24:15

我不知道這是否有幫助，但可能是這樣的：http://jsfiddle.net/7fhJw/ - 這有點令人困惑，因爲您需要獲取文本，但必須設置HTML內容。當特定元素具有子元素時，顯然會變得複雜，因爲'.text（）'只返回其內部文本 – Ian 2013-03-20 05:46:56

這演示了[用僞標記感知代替]（http://jsfiddle.net/userdude/JaN75/49 /）。複雜性來自選擇可能具有多個重疊元素的*字*（而不是*字母*）;例如，在演示中，嘗試輸入「Yesterday」，然後您會注意到它停在'Yester'然後消失。這就是我猜測@Blender意味着當他建議使用庫而不是自己嘗試去做。 – 2013-03-20 06:03:07

這是否有助於：

我產生2 random numbers再裹上他們跨度，得到你想要的結果。

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

來源

2013-03-20 05:49:30

如果你只添加的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-20 05:49:58

見這個例子..編輯，因爲你需要..

<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-20 05:52:58

如何使用javascript在字符周圍包裹元素

回答

相關問題