gpt4 book ai didi

javascript - 使用 Javascript 跨越特定字符

转载 作者:行者123 更新时间:2023-11-28 15:16:38 27 4
gpt4 key购买 nike

我想要一个函数,可以在单词中(在 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

我似乎没有正确添加“跨度”。感谢您的帮助。

最佳答案

字符串在 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);

关于javascript - 使用 Javascript 跨越特定字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47036297/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com