javascript - 将修改后的字符串传递回其原始 HTML 元素

Question

我有一个由插件动态生成的字符串，并且我已经使用正则表达式更改了日期的格式。

表示新字符串的 var 在控制台中显示为正确的格式，但是当我尝试将其传递回 insideHTML 时，没有任何反应？

如何将第二个(重新格式化的)日期字符串传递回带有 .date-start 类的 HTML 元素，以便输出发生变化？

提前非常感谢，

艾米丽

// remove space in string

var dateStr = document.querySelector(".date-start").innerHTML;

secondDateStr = dateStr.replace(/\sam$/, "am");

dateStr.innerHTML = secondDateStr;

console.log(secondDateStr)

<div class="date-start">January 6, 2018 @ 10:00 am</div>

Answer 1

在发布的代码中，您将一个字符串(HTMLElement.innerHTML 是字符串类型)分配给一个变量。

然后在 dateStr.innerHTML 中，JavaScript 中的字符串会自动转换为 String 类型的实例，因此在这里您向 dateStr 添加一个新属性 对象。

相反，首先将 DOM 元素分配给一个变量，根据需要操作字符串，然后为该元素的 innerHTML 属性分配一个新值。

您还希望确保选择器返回单个元素，否则，如果它返回一个集合(在找到多个元素时会执行此操作)，您希望获得一个特定的元素，例如 document.querySelector(".date"-开始")[0]

// remove space in string

var dateEl = document.querySelector(".date-start");

secondDateStr = dateEl.innerHTML.replace(/\sam$/, "am");

dateEl.innerHTML = secondDateStr;

console.log(secondDateStr)

<div class="date-start">January 6, 2018 @ 10:00 am</div>