Span на конкретного персонажа с Javascript

1

Я хотел бы иметь функцию, которая подчеркивает определенные символы в слове (то есть в теге 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" вещь правильно. Спасибо за вашу помощь.

  • 1
    Строки являются неизменяемыми в JS, поэтому sWord[index] = whatever что не будет работать. Смотрите это: stackoverflow.com/a/1431113/3776299
Теги:

3 ответа

1
Лучший ответ

Строка неизменна в 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);
0

У тебя кое-что не так. Сначала вы объявляете "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.

  • 0
    Спасибо :) Я привык кодировать на C ++ (что-то около 10 лет назад), и там строка представляла собой массив char, поэтому я подумал, что JS примерно такой же. Спасибо за помощь
  • 0
    Javascript очень и очень странный, особенно из C. Если вы хотите что-то похожее, попробуйте «использовать строку», что вызывает гораздо больше жалоб (например, C). Вы также можете посмотреть на машинописный текст, который применяет типы данных. (извините, если я звучал покровительственно)
0

Вы можете разделить символы на массив и объединить их в конце:

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню