时间戳

首页 > 解决方案 > 用包含每个字符的 span 替换字符串

html - 用包含每个字符的 span 替换字符串

问题描述

我想用相同的链替换包含字符链的 h1 元素的内容，但每个字符都应该包含在 span中。

这对我来说似乎很容易，但我可能低估了它。

这是我尝试过的（css仅用于调试目的）：

var titleLen = $("#title").length - 1;
for (i=0; i<titleLen; i++) {
	letter = $("#title").charAt(i);
	$("#title").append("<span>" + letter + "</span>");
};
h1 span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
Hello World !
</h1>

它不起作用，但我找不到问题所在。有什么帮助吗？

标签： htmlstringappend

解决方案

您当前的代码无法正常工作的部分原因是您在 DOM 元素上而不是在其内容上调用length-charAt但即使纠正了这一点，您也在迭代的每一步修改 div 的内容，所以第二个charAt最终会到达您刚刚插入的跨度的一部分，而不是原始字符串的第二个字符。（编辑：我刚刚意识到这个描述不太正确；你会在原始文本之后得到一个跨度包装的副本，因为你是追加而不是替换。）

以下是您可以使用原始算法的几种不同方式： 

// keep a copy of the original string and work from that:
var title = $("#title").html();
$('#title').html('');
for (i = 0; i < title.length; i++) {
  letter = title.charAt(i);
  $("#title").append("<span>" + letter + "</span>");
};


// Alternatively, build a string and dump it into the DOM all at once:
/*
let output = '';
for (i = 0; i < $('#title').html().length; i++) {
  letter = $('#title').html().charAt(i);
  output +="<span>" + letter + "</span>";
};
$('#title').html(output);
*/
h1 span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
  Hello World !
</h1>

或者更简单的方法是将字符串拆分为每个字符的数组，然后使用 'join' 包含跨度标签：

$('#title').html(
  '<span>' + 
  $('#title').html().split('').join('</span><span>') +
  '</span>'
)
h1 span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
Hello World !
</h1>

推荐阅读