javascript - 如何使用javascript将元素包裹在字符周围

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

如果您只在 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);

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>