Преобразование или удаление тегов типа [short-code] на веб-странице с помощью javascript

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть следующее html на веб-странице, созданной с помощью программного обеспечения поставщика, которое содержит [short-code] теги в стиле WordPress:

 <div class="post__entry">
<p>[table]<br>
Room, Tariff, Plan<br>
Triple Room, [rs] 2200, EP<br>
Large Room, [rs] 2500, EP<br>
Single Cottage 1, [rs] 3100, EP<br>
Single Cottage 2, [rs] 3300, EP<br>
[/table]
</p>
</div>
 

Мне нужен javascript для преобразования приведенного выше html в (по крайней мере) что-то вроде этого:

 <div class="post__entry">
<p>
Room, Tariff, Plan<br>
Triple Room, ₹ 2200, EP<br>
Large Room, ₹ 2500, EP<br>
Single Cottage 1, ₹ 3100, EP<br>
Single Cottage 2, ₹ 3300, EP<br>
</p>
</div>
 

Супер приятная презентация будет такой (определенно, это слишком много, чтобы просить) :
введите описание изображения здесь

Комментарии:

1. получите innerHTML тега p, а затем замените его тем, что вы хотите

Ответ №1:

Вы можете выполнить простую замену строки с помощью JavaScript replace() , а затем заменить текст обратно в его контейнер измененной строкой.

Нацеливание на все внутри элемента с помощью class post__entry :

     let postEntry = document.querySelector('.post__entry')
    let postText = postEntry.innerHTML;
    postText = postText.replace(/[table]<br>|[/table]/g, '');
    postText = postText.replace(/[rs]/g, '₹');
    postEntry.innerHTML = postText; 
 <div class="post__entry">
  <p>[table]<br>
  Room, Tariff, Plan<br>
  Triple Room, [rs] 2200, EP<br>
  Large Room, [rs] 2500, EP<br>
  Single Cottage 1, [rs] 3100, EP<br>
  Single Cottage 2, [rs] 3300, EP<br>
  [/table]
  </p>
</div> 

В /g конце искомого текста указано, что JS заменяет все совпадения, а не только первое.

К сожалению, для получения красивой презентации таблицы потребуется гораздо больше работы 😉