Question

我想在元素中包围一些字符。

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

然后如果javascript随机选择“随机”中的“m”和字符串中的“r”。我希望它成为这个： <div>Some rando<span>m</span> st<span>r</span>ing</div>

如果没有jQuery的替换，我该怎么做？

本机替换不会更改原始字符串，只需使用修改后的字符串覆盖原始字符串，就会删除元素的其他样式。我也使用insertNode进行了调查但没有用。

Answer 1

这有助于：

我生成2 random numbers然后用span包装它们并得到你想要的结果。

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

Answer 2

如果你只在中添加 span标签，那么所有样式都应该保留（除非你有你关心的子元素）。

假设：

div中没有子元素
文本内容本身是html-safe
您可以找到要包装的字符的索引

（所有假设在你的例子中都是正确的）

您可以转换原始字符串并使用.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);

Answer 3

请参阅此示例..根据需要进行编辑..

<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>

如何使用javascript围绕角色包装元素

3 个答案: