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

Question

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;
}

html lang-html prettyprint-override">The fox jumps over the bush, the penguin walks, the cat drinks.

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

Answer 1

你只是替换整个HTML内容没有附加，所以你需要创建一个新的跨度元素，并在正文中添加该元素，你也可以使用innetText代替内部Html，因为内Html也会给内部元素以及文本。

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.

Answer 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.

Answer 3

我想这是你想做的。正如异端猴子所指出的，像那样只使用一个正则表达式是行不通的。不能在字符串上设置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.