javascript - 如何使用 JavaScript 在可编辑的 中连续 .replace() 单词？

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 第一个参数函数。

您只需传递您的语法函数而无需调用。

setInterval(语法, 500)

上面的代码可以工作，因为你只是传递你的函数每 500 毫秒执行一次，而不是它的返回值 undefined 并且会导致错误的行为.

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