javascript - 如何使用尚未在 div/span 中的 javascript 选择文本

Question

我正在使用 https://www.w3schools.com/howto/howto_js_typewriter.asp 中显示的打字效果.不过，我想稍微改变一下，把“效果!”这个词做成!文本蓝色。

问题是，我不知道如何选择未包含在 html 元素(如 span/div)中的文本。我不认为 javascript/css 可以选择单个字符，所以我尝试在 if 语句中插入一个标记，但浏览器似乎会自动关闭任何打开的 span 标记。不确定从这里去哪里。

来自 W3 的原始代码

<p id="demo"></p>

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

我的代码

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  if (i == 20) {
    document.getElementById("demo").innerHTML += '<span>';
  if (i == 26) {
    document.getElementById("demo").innerHTML += '</span>';
}

我想获得“Lorem ipsum 打字效果!”与“效果!”包裹在一个跨度中，这样我就可以将该文本更改为蓝色。即 "Lorem ipsum typing <span style='color:blue;'>effect!</span>"

Answer 1

使用替换来查找和交换您要查找的整个字符串。不过，在整个单词可见之前，这将不可见。

if (i == 26) {
    var txt = document.getElementById("demo").innerHTML;
    txt.replace("effect!", "<span style='color:blue;'>effect!</span>");
    document.getElementById("demo").innerHTML = txt
}

如果您希望“随手可得”，当 i 介于 20 和 26 之间时，您需要将跨度环绕在每个字符周围，作为将其添加到 DIV 的一部分。

document.getElementById("demo").innerHTML += "<span style='color:blue;'>" + txt.charAt(i) + "</span>";