Оборачивание тега ссылки вокруг текста с помощью JavaScript

Question

Ссылка на CodePen .

Я пытаюсь обернуть все городские тексты в столбце Местоположение со ссылкой на их указанную c страницу местоположения на веб-сайте. Таким образом, Кембридж будет заключен в тег ссылки, идущий на страницу Кембриджа, Тимминс будет заключен в тег ссылки, идущий на страницу Timmins, и т. Д. c.

Я начал с двух ссылок на попытайся заставить это работать. Перебирая td внутри столбца location, и, если значение равно указанному c text, добавьте ссылку на него. Попытка заставить его работать.

JS

/////// Grab the Locations column ///////

let col5 = document.querySelectorAll("td:nth-child(5)");

// Cities Data

const cities = [
  {
    id: 1,
    city: 'Cambridge',
    link: '/locations/cambridge'
  },
  {
    id: 2,
    city: 'Timmins',
    link: '/locations/timmins'
  }
]

/////// Link up all td's to location pages ///////

// Loop over locations column
for (let i = 0; i < col5.length; i++) {
  // If it matches the specific city, wrap text around link tag linking to specific location
  if (col5.innerHTML === cities[0].city) {
    // Set Links Info
    a.setAttribute("href", cities[0].link);
    // Append
    col5[i].appendChild(a);
  } else if (col5.innerHTML === cities[1].city) {
    // Set Links Info
    a.setAttribute("href", cities[1].link);
    // Append
    col5[i].appendChild(a);
  }
}

Answer 1

Как вы можете себе представить, копирование / вставка / изменение кода для каждого из cities не является идеальным в любом случае.

Вы можете рассмотреть использование таких методов массива, как forEach и find ...

const cities = [
  { id: 1, city: 'Cambridge', link: '/locations/cambridge' },
  { id: 2, city: 'Timmins', link: '/locations/timmins' }
]

// Go through each cell
let col5 = document.querySelectorAll("td:nth-child(5)");
col5.forEach(function(el) {
  // Find the city
  var city = cities.find(function(x) { return x.city == el.innerHTML; });
  if (city) {
    // Wrap in a link
    el.innerHTML = '<a href="' + city.link + '">' + el.innerHTML + '</a>';
  }
});

<table>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>Cambridge</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>Timmins</td></tr>
</table>

(Незначительное замечание, прежде чем кто-либо комментирует ... Я использую function(x) {} вместо x =>, потому что мне все еще нужно кодировать для IE11, который не поддерживает функции стрелок )