如何在 JavaScript 中连续使用 JavaScript 编辑 .replace() 单词<div>？

Question

我正在尝试创建一个简单的IDE，它要做的就是颜色代码某些语法。现在，我正在尝试弄清楚如何用<span id="var">var</span>替换var之类的内容。当页面首次加载时，.replace()可以工作，但在您开始键入后不行，即使它是在间隔上运行的。

实时代码在这里codepen.io/alanay/pen/golgdx

这只是JS：

document.getElementsByTagName('div')[0].contentEditable = 'true';
function syntax() {
  var div = document.getElementsByTagName('div')[0].innerHTML;
  var res = div.replace("IDE", "Test");
  document.getElementsByTagName('div')[0].innerHTML = res;
}
setInterval(syntax(), 500)

Answer 1

让我们解释一下为什么它不使用您的代码。

setInterval方法采用2个参数，您要运行的函数和下一个毫秒执行的delay。

当您使用括号（例如syntax()）调用函数时，它将为您提供功能输出，即

在下面的代码中，sum函数确实求和了2个数字，并在span元素中显示。

基本上return语句停止函数执行并给出输出。

function sum(a, b) {
    return a + b
}
// will print 3;
let sumDiv = document.getElementById('sum');
sumDiv.innerHTML = sum(1, 2);

The sum is <span id='sum'></span>

如果您没有return语句，则该功能会自动返回undefined。

在以下代码中，我正在添加2个数字，但不返回它们并返回功能返回undefined。

function sum(a, b) {
    a + b
}
// will print 3;
let sumDiv = document.getElementById('sum');
sumDiv.innerHTML = sum(1, 2);

The sum is <span id='sum'></span>

让我们返回到setInterval和我们的syntax函数。

调用setInterval(syntax(), 500)时，您的syntax()功能执行并返回undefined为setInterval第一个参数函数。

您只需要通过syntax函数而无需致电。

setInterval(syntax, 500)

上面的代码将起作用，因为您只是传递了每个500毫秒执行的函数，而不是返回的值，即undefined，并且会导致错误的行为。

您可以在此处和此处分别了解有关undefined类型和return语句的更多信息。它们是JavaScript的非常重要的部分，我建议您花一点时间阅读它们。

Answer 2

您的语法是错误的。只需将其设置为setInterval（functionname_without_paranthesis，time_in_ms）。

只需将其设置为setInterval（Syntax，500）