Question

我希望有一个函数可以在一个单词中强化特定字符（即在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

好像我没有正确添加“跨度”的东西。谢谢你的帮助。

Answer 1

字符串在js中是不可变的，这意味着您无法以您尝试的方式更改它。您可以做的是使用更新的内容从字符串创建一个新字符串。我会这样做，将输入字符串拆分为数组，反过来，然后执行从0到结束的所有操作：

＆＃13;

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);

＆＃13;

Answer 2

您可以将字符拆分为数组并在最后将它们连接在一起：

＆＃13;

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( '' );
}

＆＃13;

.underlined {
  color: #aaa;
  text-decoration: underline;
}

＆＃13;

<input type="button" value="click" onclick="test()" />
<p class="word">Helowdi</p>

＆＃13;

Answer 3

你有一些错误。首先，将“sWord”声明为字符串

django-minio-storage

然后你开始像对待数组一样对待它

var sWord = document.getElementsByClassName("word")[0].innerHTML; // sWord: Helowdi

然后，您尝试将其作为字符串重新放回DOM中

sWord[rUnderlinedLettersLocation[i-1]] = "<span class='underlined'>" + sWord[rUnderlinedLettersLocation[i-1]] + "</span>";

有很多不同的方法可以解决这个问题。我不是百分之百地确定你想要完成什么，但如果我试图完成你想要做的事情，我会使用一系列角色。

document.getElementsByClassName("word")[0].innerHTML = sWord;

你也可以使用字符串函数，比如substring。或者你会有一个空字符串变量并继续添加它（类似这样）

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);

编码的乐趣，但最初可能会令人困惑。我建议您在尝试制作自己的解决方案之前花一周左右的时间浏览教程。您可以使用许多工具，例如CodeCademy。

使用Javascript跨越特定字符

3 个答案: