Question

我试图创建一个简单的IDE，它所要做的只是颜色代码某些语法。现在，我正试图找出如何用var替换<span id="var">var</span>之类的内容。 .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声明here和here。它们是JavaScript的重要组成部分，我建议您花点时间阅读它们。

Answer 2

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

将其设置为setInterval（syntax，500）

如何使用JavaScript连续.replace（）在可编辑的<div>中的单词？

2 个答案: