如何替换字符串中的单词并在 Javascript 中添加 id答案

【问题标题】：How can I replace words in a string and add id in Javascript如何替换字符串中的单词并在 Javascript 中添加 id
【发布时间】：2020-06-09 20:48:01
【问题描述】：

var list = [{
    name: "koala",
    owner: "mark"
  },

  {
    name: "opossum",
    owner: "lala"
  },

  {
    name: "dog",
    owner: "lucia"
  }
];



var str = document.body.innerHTML;
var toChange = /fox|penguin|cat/ig;


for (let listItem of list) {
  str = str.replace(toChange, listItem.name);
  str.id = 'span';
  document.body.innerHTML = str;
  console.log(listItem.name);
}

span {
  text-decoration: underline;
  color: red;
}

The fox jumps over the bush, the penguin walks, the cat drinks.

我基本上想做的是将HTML文本中的动物替换为“列表”中的动物。此外，我希望这些最后更改的动物名称也能改变颜色。我设法用动物考拉替换，但我不太确定为什么它只替换为考拉，好像我 console.log(listItem.name) 我得到了所有三只动物。 for循环有问题吗？

【问题讨论】：

一旦你替换了动物名称一次，它们就不再存在了，可以再次替换......
您的正则表达式在全局范围内匹配 fox、penguin 和 cat 的所有三个（因此，这三个中的任何一个的每个实例）。所以第一次，他们都被考拉取代了。在那之后，它就不再匹配了，因为现在一直都是考拉。
这能回答你的问题吗？ How to replace multiple strings with other multiple strings at a time in javascript?
请注意，字符串没有id 属性，因此设置str.id = 'span' 没有任何作用，因为您不是针对元素，而是针对字符串。
另外，最好找到另一种方法来避免在这样的文本节点上使用正则表达式，但如果你真的需要，请参阅 1 和 2。不过，这绝对是一种反模式，但比 var str = document.body.innerHTML; 更好，然后尝试在一个正则表达式中操纵整个身体，this 适用于。

标签： javascript

【解决方案1】：

我认为这就是你想要做的。作为Heretic Monkey pointed out，只使用一个这样的正则表达式是行不通的。您不能在字符串上设置 id。此外，id 必须是唯一的，因此您不能为不同的元素设置相同的 id。

var list = [{
    name: "koala",
    owner: "mark"
  },

  {
    name: "opossum",
    owner: "lala"
  },

  {
    name: "dog",
    owner: "lucia"
  }
];

var str = document.body.innerHTML;
var toChange = [/fox/ig, /penguin/ig, /cat/ig];


for (let i = 0; i < list.length; i++) {
  str = str.replace(toChange[i], `<span>${list[i].name}</span>`);
  document.body.innerHTML = str;
  console.log(list[i].name);
}

span {
  text-decoration: underline;
  color: red;
}

The fox jumps over the bush, the penguin walks, the cat drinks.

【讨论】：

【解决方案2】：

将代码的相应部分替换为：

var toChange = [/fox/ig, /penguin/ig, /cat/ig];

for (let listItem of list) {
  str = str.replace(toChange[list.indexOf(listItem)], listItem.name);

结果：

The koala jumps over the bush, the opossum walks, the dog drinks.

【讨论】：

【解决方案3】：

您只是替换了未附加的整个 HTML 内容，因此您需要创建一个新的 span 元素并将该元素添加到 body 中，您也可以使用 innetText 代替 innerHtml，因为 innerHtml 将提供内部元素为文字很好。

var list = [{
    name: "koala",
    owner: "mark"
  },

  {
    name: "opossum",
    owner: "lala"
  },

  {
    name: "dog",
    owner: "lucia"
  }
];
var htmlText = document.body.innerText;
var toChange = /fox|penguin|cat/ig;
var spanComponent='';
for (let listItem of list) {
  var str =  htmlText.replace(toChange, listItem.name);
  console.log(str)
  var span = document.createElement('span')
  span.innerText = str;
  document.body.appendChild(span);
}

The fox jumps over the bush, the penguin walks, the cat drinks.

请运行 sn-p。

【讨论】：