给字符串中的每个字母添加HTML标记

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为字符串的每个字母应用跨度。

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

- user3104155

---

似乎您忘记发布jQuery代码。 - Satpal

Answer 1

几个步骤：

1. 获取文本内容并创建单个字符的数组，
2. 清空原容器，
3. 将每个字母作为 span 元素添加。

代码如下：

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

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

Demo

- Ja͢ck

---

在尝试了大家的答案后，我决定最喜欢这种方法。谢谢！ - user3104155

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);
  });
}

在旧版浏览器中，需要使用polyfil来支持forEach方法，或者将forEach更改为普通的for循环（代码行数相同，可能运行更快）。可以修改代码以接受一个包装元素，该元素设置了各种属性和属性，而不是使用document.createElement创建。

- RobG

---

那么像 > 和 < 这样的字符呢？ - Ja͢ck

看起来这是最简单的答案，所以我想接受它，但实际上我似乎无法让它工作。不过我会继续尝试！谢谢 - user3104155

自1978年以来一直在扼杀快乐;-) - Ja͢ck

Answer 3

尝试一下，

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

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

- Rajaprabhu Aravindasamy

---

.empty() 会使 div 变为空，因此不起作用。当我移除 .empty() 时，它可以工作，但是它会显示为 <div>hello<span>h</span><span>e</span>....</div>不过我可能可以想办法解决这个问题！谢谢 - user3104155

@user3104155 - 很好的观点 - Sudharsan S

@user3104155 是的，没错，我刚刚纠正了它； - Rajaprabhu Aravindasamy

文本可能包含>或<，这会破坏标记。 - Ja͢ck

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>');
    }
});

- Rohit Batham

Answer 5

这里有一个JSfiddle示例，展示了一种实现此功能的方法。

1. 选择文本
2. 将文本分割为字母的数组
3. 遍历数组并将其附加到目标元素上

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>

- aludvigsen

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()。这将导致浏览器在每次调用时重新计算。最好的方法是构建您的内容，然后在准备好更新时进行更新。

- Tiele Declercq

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

- w00