javascript替换可以在控制台中工作，但不能在网站上工作

72qzrwbm 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(212)

我一直在尝试创建一个标签列表，并使用逗号将它们分开。我正在使用webflow，遗憾的是这在他们的cms中是不可能的。
我想到了一个解决办法，用javascript代码替换逗号。
代码如下：

function tags() {
  var tag = document.getElementById("tag__wrap").innerHTML;
  str = tag.replace(/,/g, '</p><p class="tag__wrap">');
}

tags();
console.log(str);

出于某种原因，当我在控制台中查找代码时，代码工作正常，但实际上没有在实际的网站上显示任何内容。有什么想法吗？

replace JavaScript console.log

来源：https://stackoverflow.com/questions/68333976/javascript-replace-works-in-console-but-not-on-the-website

1条答案

按热度按时间

p3rjfoxz1#

如果您的目标是创建多个元素来代替单个元素（具有逗号分隔的标记），那么您需要操作dom。仅将html分配给字符串变量是不够的。
有很多方法可以做到这一点。这里有一个：

function tags() {
  var elem = document.getElementById("tag__wrap");
  var tags = elem.textContent.match(/[^,\s]+/g) || [];
  elem.textContent = tags.shift();
  for (let text of tags) {
      var newElem = elem.cloneNode();
      newElem.textContent = text;
      elem.insertAdjacentElement("afterend", newElem);
      elem = newElem;
  }
}

// Delay the change, so you can see before & after in the snippet
setTimeout(tags, 1000);


# tag__wrap {

   background: lightblue;
   display: inline-block;
   margin: 5px;
   padding: 3px 8px;
   border-radius: 4px;
}

<p id="tag__wrap">algorithm,javascript,html,css</p>

赞(0）回复(0）举报 2021-09-13

我来回答

javascript替换可以在控制台中工作，但不能在网站上工作

1条答案

相关问题

热门标签

最新问答