Я хотел бы иметь функцию, которая подчеркивает определенные символы в слове (то есть в теге html). Вот то, что у меня есть на данный момент:
<html>
<header>
<style>
.underlined {
color: #aaa;
text-decoration: underline;
}
</style>
<script type="text/javascript" language="javascript">
var rUnderlinedLettersLocation = [1, 3, 5]
function test(){
var sWord = document.getElementsByClassName("word")[0].innerHTML;
for(i = rUnderlinedLettersLocation.length;i > 0; i--){
console.log("full word = " + sWord);
console.log("letter that needs to be underlined : " + sWord[rUnderlinedLettersLocation[i-1]]);
sWord[rUnderlinedLettersLocation[i-1]] = "<span class='underlined'>" + sWord[rUnderlinedLettersLocation[i-1]] + "</span>";
}
console.log("modified word is = " + sWord);
document.getElementsByClassName("word")[0].innerHTML = sWord;
}
</script>
</header>
<body>
<input type="button" value="click" onclick="test()"/>
<p class="word">Helowdi</p>
</body>
</html>
Выход, который у меня есть:
full word = Helowdi
letter that needs to be underlined : d
full word = Helowdi
letter that needs to be underlined : o
full word = Helowdi
letter that needs to be underlined : e
modified word is = Helowdi
Где я должен ожидать чего-то вроде:
full word = Helowdi
letter that needs to be underlined : d
full word = Helow<span class="underlined">d</span>i
letter that needs to be underlined : o
full word = Hel<span class="underlined">o</span>w<span class="underlined">d</span>i
letter that needs to be underlined : e
modified word is = H<span class="underlined">e</span>l<span class="underlined">o</span>w<span class="underlined">d</span>i
Кажется, я не добавляю "span" вещь правильно. Спасибо за вашу помощь.
Строка неизменна в js, то есть вы не можете ее изменить так, как вы пытаетесь. Что вы можете сделать, так это создать новую строку из вашей строки с обновленным содержимым. Я бы сделал это, разделив входную строку на массив, отменив ее, а затем сделав все от 0 до конца:
let s = 'Helowdi'.split('').reverse();
let underlinedLettersLocation = [1, 3, 5];
for (let index of underlinedLettersLocation) {
s[index] = '<span class="underlined">' + s[index] + '</span>';
}
let newString = s.reverse().join('');
console.log(newString);
У тебя кое-что не так. Сначала вы объявляете "sWord" как строку
var sWord = document.getElementsByClassName("word")[0].innerHTML; // sWord: Helowdi
Затем вы начинаете рассматривать его как массив
sWord[rUnderlinedLettersLocation[i-1]] = "<span class='underlined'>" + sWord[rUnderlinedLettersLocation[i-1]] + "</span>";
Затем вы снова пытаетесь вернуть его в DOM в виде строки
document.getElementsByClassName("word")[0].innerHTML = sWord;
Существует несколько способов сделать это. Я не на 100% уверен, что вы пытаетесь выполнить, но если я пытаюсь сделать именно то, что вы пытаетесь сделать, я бы использовал массив символов.
function underlineWord(text,key) {
let charArr = text.split(""); // Converts string to character array ["f","o","o","b","a","r"]
for (let i = 0; i < key.length; i++) {
let replaceAt = key[i]; // replaceAt is 1, 3, and 5 for each loop
charArr[replaceAt] = "<span class='underlined'>" + charArr[replaceAt] + "</span>";
}
return charArr.join(""); // Converts char array back to string;
}
let changedWord = underlineWord("foobar",[1,3,5]));
$(".word").HTML(changedWord);
Вы также можете использовать строковые функции, такие как подстрока. Или у вас будет пустая строковая переменная и продолжайте добавлять к ней (что-то вроде этого)
let changedWord = "";
let underlineKey = [1,3,5];
for (var i = 0; i < str.length; i++) {
// arr.includes(1) returns true if the value "1" is somewhere in the array
if (underlineKey.includes(i)) {
changedWord += "<span class='underlined'>" + str[i] + "</span>";
} else {
changedWord += str[i];
}
}
Кодирование весело, но может быть запутанным вначале. Я бы посоветовал вам потратить неделю или около того, изучая учебные пособия, прежде чем пытаться создавать свои собственные решения. В вашем распоряжении много инструментов, таких как CodeCademy.
Вы можете разделить символы на массив и объединить их в конце:
var rUnderlinedLettersLocation = [1, 3, 5]
function test() {
const wordElement = document.getElementsByClassName("word")[0];
const word = wordElement.innerText;
const replaced = word.split( '' ).map( ( char, index ) => {
if ( rUnderlinedLettersLocation.indexOf( index ) > -1 ) {
return '<span class="underlined">' + char + '</span>';
}
return char;
} );
wordElement.innerHTML = replaced.join( '' );
}
.underlined {
color: #aaa;
text-decoration: underline;
}
<input type="button" value="click" onclick="test()" />
<p class="word">Helowdi</p>
sWord[index] = whatever
что не будет работать. Смотрите это: stackoverflow.com/a/1431113/3776299