Заменить строку диапазонами, содержащими каждый символ
Я хотел бы заменить содержимое элемента h1 содержащий цепочку символов с той же цепочкой, но каждый символ должен быть заключен в диапазон.
Мне это казалось достаточно простым, но я, возможно, недооценил это.
Вот что я пробовал (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>Он не работает, но я не могу найти проблему. Любая помощь ?
Ответы 1
Часть причины, по которой ваш текущий код не работает, заключается в том, что вы вызываете length и charAt для элемента DOM, а не для его содержимого, но даже с этим исправлением вы изменяете содержимое 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>Или более простой способ сделать это — разбить строку на массив для каждого символа, а затем использовать «объединение», чтобы включить теги span:
$('#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>