Множественная замена , нескольких подстрок в строке, на разные заменяемые значения String.replace js javaScript

Рейтинг: 1Ответов: 2Опубликовано: 06.04.2023

Всем доброго времени суток, нужна помощь в решении не большой задачи:

Нужно в строке , заменить несколько подстрок, разными значениями , первая подстрока на значение переменной , а вторая подстрока на строку но в виде таблицы html с данными из масива.

Пример :

let ageAndrew = '14';
let text = 'Меня зовут Андрей, мой возраст ageAndrew , все данные о моей семье: table';

Где собственно ageAndrew это первая подстрока которую надо заменить , а table вторая.

Есть массив со всеми данными о родных Андрея.

let people = [
   {
      'name' : 'Александр',
      'surName' : 'Андреев', 
      'age' : '33',
      'dateOfBirth' : '02031990'
   },
   {
      'name' : 'Нина',
      'surName' : 'Андреева', 
      'age' : '31',
      'dateOfBirth' : '05051992'
   },
   {
      'name' : 'Андрей',
      'surName' : 'Андреев', 
      'age' : '14',
      'dateOfBirth' : '05052009'
   }
]

сделал собственно таблицу в HTML для представления, как это должно быть внутри строки:

<label>Данные о моей семье</label>
<table>
   <tr>
      <td>Имя</td>
      <td>Фамилия</td>
      <td>Возраст</td>
      <td>Дата рождения</td>
   </tr>
   <tbody>
   <tr ng-repeat="row in people">
      <td ng-bind="row.name"></td>
      <td ng-bind="row.surName"></td>
      <td ng-bind="row.age"></td>
      <td ng-bind="row.dateOfBirth"></td>
   </tr>
   </tbody>
</table>

И вот тут самое интересное, я хочу заменить в тексте ageAndrew на 14, а вместо table вставить отрисованную таблицу как в html, чтоб было видно в браузере как таблицу, но заменять я планирую её как строку ( как я это понимаю ).

Думаю для этого стоит использовать String.replace(), если я делаю 1 замену в строке , то есть заменяю 1 подстроку, то всё ок, вот например:

let newStr = text.replace(/ageAndrew/,ageAndrew);

а вот как заменить сразу 2 подстроки , разными значениям (переменными) не совсем понимаю,

возможно нужно использовать рег. выражения , но я в них плох.

Буду благодарен за любой совет или пример как решить задачу.

И вот как быть с таблицей в виде строки, возможно ли такое сделать? В гуглинге чёт ничего такого не нашёл.

javascript html регулярные-выражения str-replace
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если нужно именно заменить, то меняйте сначала одно, а следом другое. В чём проблема два раза применить replace ? Чтобы отображалась форматированная таблица - вставляйте строку, как HTML.

let text = "Меня зовут Андрей, мой возраст ageAndrew, все данные о моей семье: table";
let ageAndrew = "14";
let people = [
  { name: "Александр", surName: "Андреев", age: "33", dateOfBirth: "02031990" },
  { name: "Нина", surName: "Андреева", age: "31", dateOfBirth: "05051992" },
  { name: "Андрей", surName: "Андреев", age: "14", dateOfBirth: "05052009" }
];

let table = document.createElement('table');
table.innerHTML = `<tr><th>Имя</th><th>Фамилия</th><th>Возраст</th><th>Дата рождения</th></tr>`;

people.forEach((row) => {
  table.tBodies[0].insertAdjacentHTML(
    "beforeend",
    `<tr ng-repeat="row in people">
      <td ng-bind="${row.name}">${row.name}</td>
      <td ng-bind="${row.surName}">${row.surName}</td>
      <td ng-bind="${row.age}">${row.age}</td>
      <td ng-bind="${row.dateOfBirth}">${row.dateOfBirth}</td>
   </tr>`
  );
});

let newStr = text.replace(/ageAndrew/, ageAndrew).replace(/table/, table.outerHTML);

document.body.insertAdjacentHTML("beforeend", newStr);

Здесь очень упрощённое решение. Но, во-первых, так нагляднее. А, во-вторых, для вставки строкой, это не так критично.

▲ 1

Имя и возраст

Для того чтобы одновременно произвести замену нужно вместо строки замены подставить функцию, в документации она называется replacer, не забывайте обращаться к документации, там много полезного и примеры есть.

Что касается имени нашего героя Андрея и его возраста, то замена происходит на основе регулярки. Чтобы не делать ее слишком сложной я сделал ее проще (такую регулярку можно сгенерировать через код).

/(personName)|(personAge)/g

Мы вставляем строки из шаблона в группы которые представлены скобками и делаем разделитель | который обозначает или таким образом мы ищем или то или это, а флаг g обозначает глобальный поиск без него поиск и замена произойдет только с первым совпадением а остальные так и остануться как были.

Пример генерации такой регулярки из объекта:

const personData = {personName: 'Andrew', personAge: 14}
const reg = new RegExp(Object.keys(personData).map(key =>`(${key})`).join('|'), 'g')
console.log(reg)

Еще один более простой способ множественной замены — использовать шаблонную строку:

const p = {personName: 'Andrew', personAge: 14}
console.log(`Меня зовут ${p.personName}, мой возраст ${p.personAge}`)

Таблица

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

Я так понял Вы пишите на Angular, думаю у Вас и так все с таблицей хорошо через ng-repeat в принципе и в заменяемую первую строку текста можно было вклинить данные, не совсем понятно зачем Вам использовать replace. Мне кажется использовать данные из модели гораздо проще и правильнее для Angular

<p>Меня зовут {{person.name}}, мой возраст {{person.age}}</p>

Хотя я на нем давно не писал ничего. У него есть хорошие примеры возможно, Вы не знали, поэтому на всякий случай добавил в ответ.

Я не использовал тех аттрибутов которые у Вас, продемонстировал на простом HTML. Для таблицы я применил innerHTML в некоторых случаях это не безопасно, поэтому лучше так не делать, либо проверять что данные которые вставляются только из букв и цифр. А лучше использовать textContent или innerText Я проверку такую не делал, но на основе регулярок Вы легко можете ее сделать сами, заодно научитесь их использовать.

const person = document.getElementById('person');
const family = document.querySelector('table#family > tbody');

function makeInfo(personData, familyData){
  const template = 'Меня зовут personName, мой возраст personAge';
  person.textContent = template.replace(/(personName)|(personAge)/g, 
    function(match){
        return personData[match] // ключ берем из совпадения, данные из personData 
    })
  tableRows= familyData.map(({name, surName, age, dateOfBirth})=> (
    `<tr>
      <td>${name}</td>
      <td>${surName}</td>
      <td>${age}</td>
      <td>${dateOfBirth}</td>
    </tr>`        
  )).join('');
  family.innerHTML = tableRows
}  

const familyData = [
  {
      'name' : 'Александр',
      'surName' : 'Андреев', 
      'age' : '33',
      'dateOfBirth' : '02031990'
  },
  {
      'name' : 'Нина',
      'surName' : 'Андреева', 
      'age' : '31',
      'dateOfBirth' : '05051992'
  },
  {
      'name' : 'Андрей',
      'surName' : 'Андреев', 
      'age' : '14',
      'dateOfBirth' : '05052009'
  }
]
const personData = {personName: 'Andrew', personAge: 14}
makeInfo(personData, familyData)
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
<p id="person">123</p>
<label>Данные о моей семье:</label>
<table id="family" border="1">
  <thead>
    <tr>
      <tr>
        <td>Имя</td>
        <td>Фамилия</td>
        <td>Возраст</td>
        <td>Дата рождения</td>
      </tr>
    </tr>
  </thead>
  <tbody></tbody>  
</table>

Для качества кода старайтесь давать более точные имена переменным, программисты это ценят. Надеюсь мои объяснения, код и рекомендации окажуться полезными.