Question

我在div中有一串字母 - 比如这......

<div>hello</div>

我想为字符串中的每个字母添加一个html标记，这样就可以了 - 比如这个

<div>
    <span>h</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
</div>

由于这个div中的字母会动态变化，因此它不会是静态的，因此我想使用jquery将跨度应用于字符串的每个字母。

任何帮助将不胜感激 - 谢谢！

Answer 1

几步：

抓取文本内容并创建一个单独的字符数组
清空原始容器
将每个字母添加为span元素。

代码：

$('div').each(function() {
    var letters = $(this).text().split(''),
    $container = $(this).empty();

    $.each(letters, function(_, letter) {
       $('<span>', {text: letter}).appendTo($container);
    });
});

Demo

Answer 2

您可以拆分 textContent ，然后使用嵌入的合适标记再次连接它。所以假设你有一个div的引用：

div.innerHTML = '<span>' + (div.textContent || div.innerText).split('').join('<\/span><span>') + '<\/span>';

修改

总有一个杀人喜欢指出明显的缺陷!!好的，这里有更强大的东西。

function spanizeText(element) {
  var text = (element.textContent || element.innerText).split('');
  element.innerHTML = '';

  text.forEach(function(c) {
    var sp = document.createElement('span');
    sp.appendChild(document.createTextNode(c));
    element.appendChild(sp);
  });
}

在旧浏览器中需要forEach的polyfil，或者将 forEach 更改为 for 循环（相同数量的代码行，可能运行得更快）。可以修改它以接受使用克隆的各种属性和属性设置的包装元素，而不是使用 document.createElement 。

Answer 3

尝试，

var xDiv = $('div');
var xChars = $.trim(xDiv.text()).split('');
xDiv.empty();

$.each(xChars,function(i,val){
  xDiv.append($('<span>'+ val +'</span>'));
});

Answer 4

HTML代码

<div id="str">hello</div>
<div id="result">

</div>

JS代码

$(function(){
    var str= $('div#str').html();
    for(var i=0; i<str.length; i++){
        $('div#result').append('<span>'+str[i]+'</span>');
    }
});

Answer 5

这是一个JSfiddle演示一种方法来实现这一目标。

选择文字
将文本拆分为数组字母
遍历数组并附加到目标元素

Jquery的

// For all matching elements
$(string).each(function() {

    // Get contents of string
    var myStr = $(this).html();

    // Split myStr into an array of characters
    myStr = myStr.split("");

    // Append strings to the result div in spans
    for (var i = 0, len = myStr.length; i < len; i++) {
        $("#result").append("<span>"  + myStr[i] + "</span>");
    }
});

Html输出

<div id="letters">hello world</div>

<div id="result">
  <span>h</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span> </span>
  <span>w</span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>
</div>

Answer 6

var txt = $("div").text();
var html = [];
for(var i in txt) html.push("<span>" + txt[i] + "</span>");
$("div").html(html.join(""));

我不会对每个角色使用html（）或append（）。这将强制浏览器在每次调用时重新计算。建立内容并在准备好后进行更新会更好。

Answer 7

您也可以使用正则表达式执行此操作：

//var s = 'hello';
var s = $('#myDiv').html(); // get the string from the div

var newStr = s.replace(/(.)/gi, function(str, g1) {
    return '<span>' + g1 + '</span>';
});

alert(newStr);

将html标记添加到字符串中的每个字母

7 个答案:

修改