jquery：将文本拆分为多个框

如何打开下面的html

<h3>Break me</h3>

谢谢。

//将字符串拆分为“字符数组”
// Splits the string into a "character array"    
var charArray = $('h3').text().split(''); 
// Clear the html of h3 so we can change it    
$('h3').html(''); 
for (var i = 0; i < charArray.length; i++)
{
  // for each character, append it to h3 with a span wrapper
  $('h3').append('<span class="box-letter">' + ((charArray[i] == ' ') ? '&nbsp;' : charArray[i]) + '</span>')
}

var charArray=$（'h3'）.text（）.split（''）；
//清除h3的html以便我们可以更改它
$（'h3'）.html（“”）；
对于（变量i=0；i

//将字符串拆分为“字符数组”
var charArray=$（'h3'）.text（）.split（''）；
//清除h3的html以便我们可以更改它
$（'h3'）.html（“”）；
对于（变量i=0；i

试试：

helloworld

使用javascript：

var target = $("h3");
var orig = target.text().trim();
target.empty();

for(var i=0; i < orig.length; i++){
    target.append("<span class='box-letter'>"+orig[i]+"</span>");
}

var目标=$（“h3”）； var orig=target.text（）.trim（）； target.empty（）； 对于（变量i=0；i 要获得：

<h3 id="foo">
    <span class='box-letter'>H</span>
    <span class='box-letter'>e</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>w</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>r</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>d</span>
</h3>

H
E
L
L
o
W
o
R
L
D

可能需要手动检查发送给

的“空白”字母，但是…

请尝试：

$('h3').each(function() {
  var data = $(this).text();
  var char;
  var output = '';

  for(i = 0; i < data.length; i++) {
    char = data.charAt(i);
    output += '<span class="box-letter">' + ((char == ' ') ? '&nbsp;' : char) + '</span>';
  }
  $(this).html(output);
});

helloworld

使用javascript：

var target = $("h3");
var orig = target.text().trim();
target.empty();

for(var i=0; i < orig.length; i++){
    target.append("<span class='box-letter'>"+orig[i]+"</span>");
}

var目标=$（“h3”）； var orig=target.text（）.trim（）； target.empty（）； 对于（变量i=0；i 要获得：

<h3 id="foo">
    <span class='box-letter'>H</span>
    <span class='box-letter'>e</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>w</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>r</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>d</span>
</h3>

H
E
L
L
o
W
o
R
L
D

可能需要手动检查发送给

的“空白”字母，但是…

$（'h3'）。每个（函数（）{
$('h3').each(function() {
  var data = $(this).text();
  var char;
  var output = '';

  for(i = 0; i < data.length; i++) {
    char = data.charAt(i);
    output += '<span class="box-letter">' + ((char == ' ') ? '&nbsp;' : char) + '</span>';
  }
  $(this).html(output);
});

var data=$（this.text（）；
var-char；
var输出=“”；
对于（i=0；i
$（'h3'）。每个（函数（）{
var data=$（this.text（）；
var-char；
var输出=“”；
对于（i=0；i
您需要根据猜测的H3值，然后将其拆分为一个字符数组。之后，您可以将某些字符替换为其html实体：

// Get the text string
var str = $("h3").text();

// Get an array of each character
var chars = str.split("");

然后，您可以在数组（字符）上循环并转换您想要的任何内容：

下面是一个很好的示例，说明如何处理此问题：

希望有帮助
 您需要按照猜测的方式获取H3的值，然后将其拆分为一个字符数组。之后，您可以将某些字符替换为其html实体：

// Get the text string
var str = $("h3").text();

// Get an array of each character
var chars = str.split("");

然后，您可以在数组（字符）上循环并转换您想要的任何内容：

下面是一个很好的示例，说明如何处理此问题：

希望有帮助
 我不知道你是想要跨距，还是只是想打破这个词，你可以这样做：

h3 { width: 5px; word-wrap: break-word; }

我不知道您是否想要跨距，或者您是否只是想打破单词，您可以使用以下方法：

h3 { width: 5px; word-wrap: break-word; }

+1您需要更新追加行以说明空格$（'h3'）。追加（“”+（（charArray[i]=“”）？“”：charArray[i]）+“”）+1您需要更新追加行以说明空格$（'h3'）。追加（“”+（（charArray[i]==“”）？“”：charArray[i]）+“”）；您不应该使用charAt（i）——而不是[i]——来访问索引i处字符串的字符吗？编辑：尽管大多数浏览器都支持这两种获取字符的方法，但我不会依赖于使用str[I]。您不应该使用charAt（I）——而不是[I]——来访问索引I处字符串的字符吗？编辑：虽然大多数浏览器都支持这两种获取字符的方法，但我不会依赖于使用str[I]。