使用Javascript在特定字符上设置Span_Javascript_Css

使用Javascript在特定字符上设置Span

javascript css

使用Javascript在特定字符上设置Span,javascript,css,Javascript,Css,我希望有一个函数，可以在单词（即html标记）中的特定字符下划线。以下是我目前的情况： <html> <header> <style> .underlined { color: #aaa; text-decoration: underline; } </style> <scr

我希望有一个函数，可以在单词（即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 = 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

full word=Helowdi
需要加下划线的字母：d
全字=Helowdi
需要加下划线的字母：o
全字=Helowdi
需要加下划线的字母：e
修饰词is=Helowdi

似乎我没有正确地添加“跨度”这个词。

感谢您的帮助。

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

let s='Helowdi'.split（''）.reverse（）；
设下划线字母位置=[1,3,5]；
for（让下划线字母位置索引）{
s[索引]=''+s[索引]+''；
}
让newString=s.reverse（）.join（“”）；
console.log（新闻字符串）您可以将字符拆分为一个数组，并在末尾将它们连接在一起：

var rUnderlinedLettersLocation=[1,3,5]
功能测试（）{
const wordElement=document.getElementsByClassName（“word”）[0]；
const word=wordElement.innerText；
const replaced=word.split（“”）.map（（字符，索引）=>{
if（rUnderlinedLettersLocation.indexOf（index）>-1）{
返回“”+字符+“”；
}
返回字符；
} );
wordElement.innerHTML=已替换.join（“”）；
}
。下划线{
颜色：#aaa；
文字装饰：下划线；
}

Helowdi
你有几件事做错了。首先，将“剑”声明为字符串
var sWord = document.getElementsByClassName("word")[0].innerHTML; // sWord: Helowdi

然后你开始把它当作一个数组
sWord[rUnderlinedLettersLocation[i-1]] = "<span class='underlined'>" + sWord[rUnderlinedLettersLocation[i-1]] + "</span>";


有很多不同的方法可以做到这一点。我不是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);

函数下划线（文本，键）{
让charArr=text.split（“”；//将字符串转换为字符数组[“f”、“o”、“o”、“b”、“a”、“r”]
for（设i=0；i

您还可以使用字符串函数，如substring。或者，您将有一个空字符串变量并不断添加到其中（类似于以下内容）
let changedWord=“”；
设underlineKey=[1,3,5]；
对于（变量i=0；i

编码很有趣，但一开始可能会让人困惑。我建议你先花一周左右的时间复习教程，然后再尝试自己的解决方案。有很多工具可供您使用，比如CodeCademy
 字符串在JS中是不可变的，因此swark[index]=无论什么都不起作用。请看：谢谢：我习惯于C++代码（10年前的事情），而且有一个字符串是char数组，这就是为什么我认为JS差不多相同的原因。感谢您的帮助JavaScript非常奇怪，尤其是来自C。如果您想要一些类似的东西，您应该尝试“使用字符串”，这会带来更多的抱怨（比如C）。您还可以查看typescript，它强制执行数据类型。（如果我听起来有点傲慢，那我很抱歉）
document.getElementsByClassName("word")[0].innerHTML = sWord;

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];
  }
}