БЛОГ НА HUSL


Регулярным выражением удалить ссылки по списку из массива

Автор вопроса: Сергей

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

Пробовал по всякому никак не получается, подскажите пожалуйста.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>test</title>

<script>
function start() {
var toremove = document.querySelector('.TgListPosts'); // ... 
var myArray = ['зита', 'Вася', 'hello']; // массив со словами для замены

if (toremove) {

  for (var i = 0, l = myArray.length; i < l; i++) {

console.log('Found: ' + myArray.length);
console.log('Found: ' + myArray[i]);

toremove.innerHTML = toremove.innerHTML.replace('/<a.*?'+myArray[i]+'<\/a>/gi','');

  }
}
}
window.onload=start; // запускаем функцию start при загрузке окна
</script>

</head>
<body>

<div class="777">
<p>Не изменяемый пример: 
<a href="#1" class="linkTagPost">Вася</a>
<a href="#2" class="linkTagPost">Дима</a>
<a href="#3" class="linkTagPost">Лена</a>
<a href="#3" class="linkTagPost">Ита</a>
<a href="#4" class="linkTagPost">Вита</a>
<a href="#4" class="linkTagPost">Зита</a>
<a href="#4" class="linkTagPost">Гита</a>
<a href="#5" class="linkTagPost">Витя</a>
<a href="#6" class="linkTagPost">Митя</a>
</div>

<div class="TgListPosts"> 
<p>Изменяемый пример 01: 
<a href="#1" class="linkTagPost">Вася</a>
<a href="#2" class="linkTagPost">Дима</a>
<a href="#3" class="linkTagPost">Лена</a>
<a href="#3" class="linkTagPost">Ита</a>
<a href="#4" class="linkTagPost">Вита</a>
<a href="#4" class="linkTagPost">Зита</a>
<a href="#4" class="linkTagPost">Гита</a>
<a href="#5" class="linkTagPost">Витя</a>
<a href="#6" class="linkTagPost">Митя</a>
<p>Изменяемый пример 02: 
<a href="#1" class="linkTagPost">Вася</a>
<a href="#2" class="linkTagPost">Дима</a>
<a href="#3" class="linkTagPost">Лена</a>
<a href="#3" class="linkTagPost">Ита</a>
<a href="#4" class="linkTagPost">Вита</a>
<a href="#4" class="linkTagPost">Зита</a>
<a href="#4" class="linkTagPost">Гита</a>
<a href="#5" class="linkTagPost">Витя</a>
<a href="#6" class="linkTagPost">Митя</a>
</div>

</body>
</html>

Источник

Ответы (4 шт):

Автор решения: alezhu

Попробуйте так

toremove.innerHTML = toremove.innerHTML.replace(new RegExp('/<a.*?'+myArray[i]+'<\/a>/gi'),'');
→ Ссылка
Автор решения: Алексей Шиманский

Без регуярок:

function start() {
  //var toremove = document.querySelector('.TgListPosts'); // ...
  
  
  let linkPosts =  document.querySelectorAll('.TgListPosts .linkTagPost');
  var myArray = ['зита', 'Вася', 'hello']; // массив со словами для замены
  let arrLowerCased = myArray.map(element => element.toLowerCase());

  linkPosts.forEach((el) => {
      if (arrLowerCased.includes(el.textContent.toLowerCase()))
          el.remove();        
  });
}

window.onload = start; // запускаем функцию start при загрузке окна
<div class="777">
  <p>Не изменяемый пример:</p>
    <a href="#1" class="linkTagPost">Вася</a>
    <a href="#2" class="linkTagPost">Дима</a>
    <a href="#3" class="linkTagPost">Лена</a>
    <a href="#3" class="linkTagPost">Ита</a>
    <a href="#4" class="linkTagPost">Вита</a>
    <a href="#4" class="linkTagPost">Зита</a>
    <a href="#4" class="linkTagPost">Гита</a>
    <a href="#5" class="linkTagPost">Витя</a>
    <a href="#6" class="linkTagPost">Митя</a>
</div>

<div class="TgListPosts">
  <p>Изменяемый пример 01:</p>
    <a href="#1" class="linkTagPost">Вася</a>
    <a href="#2" class="linkTagPost">Дима</a>
    <a href="#3" class="linkTagPost">Лена</a>
    <a href="#3" class="linkTagPost">Ита</a>
    <a href="#4" class="linkTagPost">Вита</a>
    <a href="#4" class="linkTagPost">Зита</a>
    <a href="#4" class="linkTagPost">Гита</a>
    <a href="#5" class="linkTagPost">Витя</a>
    <a href="#6" class="linkTagPost">Митя</a>
    <p>Изменяемый пример 02:</p>
      <a href="#1" class="linkTagPost">Вася</a>
      <a href="#2" class="linkTagPost">Дима</a>
      <a href="#3" class="linkTagPost">Лена</a>
      <a href="#3" class="linkTagPost">Ита</a>
      <a href="#4" class="linkTagPost">Вита</a>
      <a href="#4" class="linkTagPost">Зита</a>
      <a href="#4" class="linkTagPost">Гита</a>
      <a href="#5" class="linkTagPost">Витя</a>
      <a href="#6" class="linkTagPost">Митя</a>
</div>

→ Ссылка
Автор решения: ipatev_nn

Регулярные выражения содержащих в себе переменные лучше собирать с использованием конструктора. Более подробнее ниже:

foo = 'green free';

//литеральная запись
reg = /e{2}/g;
console.log('Литеральная запись(ЛЗ): ' +foo.replace(reg,''));
//true

//литеральная запись в одинарных кавычках
reg = '/e{2}/g';
console.log('ЛЗ с \': ' +foo.replace(reg,''));
//false

//литеральная запись в двойных кавычка
reg = "/e{2}/g";
console.log('ЛЗ c ": ' +foo.replace(reg,''));
//false

a = 'e';
//литеральная запись с подстановкой переменной
reg = `/${a}{2}/g`;
console.log('ЛЗ с переменной: ' +foo.replace(reg,''));
//false

//Конструктор с литеральной записью
reg = new RegExp (`/${a}{2}/g`);
console.log('Конструктор с ЛЗ: ' +foo.replace(reg,''));
//false

//конструктор с переменной
reg = new RegExp (`${a}{2}`,'g');
console.log('конструктор: ' + foo.replace(reg,''))
//true

let a = 'Дима';
let docs = document.querySelector('.TgListPosts');
reg = new RegExp(`<a.*?${a}<\/a>`, 'gi');
docs.innerHTML = docs.innerHTML.replace(reg,'');

let b = 'витя';
let docs2 = document.querySelector('.TgListPostsTwo');
docs2.innerHTML = docs2.innerHTML.replace(new RegExp(`<a.*?${b}<\/a>`, 'gi'),'');
<div class="TgListPosts">
    <a href="#1" class="linkTagPost">Вася</a>
    <a href="#2" class="linkTagPost">Дима</a>
    <a href="#3" class="linkTagPost">Лена</a>
    <a href="#3" class="linkTagPost">Ита</a>
    <a href="#4" class="linkTagPost">Вита</a>
    <a href="#4" class="linkTagPost">Зита</a>
    <a href="#4" class="linkTagPost">Гита</a>
    <a href="#5" class="linkTagPost">Витя</a>
    <a href="#6" class="linkTagPost">Митя</a>
</div>

<div class="TgListPostsTwo">
    <a href="#1" class="linkTagPost">Вася</a>
    <a href="#2" class="linkTagPost">Дима</a>
    <a href="#3" class="linkTagPost">Лена</a>
    <a href="#3" class="linkTagPost">Ита</a>
    <a href="#4" class="linkTagPost">Вита</a>
    <a href="#4" class="linkTagPost">Зита</a>
    <a href="#4" class="linkTagPost">Гита</a>
    <a href="#5" class="linkTagPost">Витя</a>
    <a href="#6" class="linkTagPost">Митя</a>
</div>

→ Ссылка
Автор решения: Сергей

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

new RegExp (`<a.*?>${myArray[i]}<\/a>`, `gi`);

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>test</title>

<script>
function start() {
var toremove = document.querySelector('.TgListPosts');
var myArray = ['31527', 'ита', 'Вася', 'hello'];

    if (toremove) {
        for (var i = 0, l = myArray.length; i < l; i++) {
        reg = new RegExp (`<a.*?>${myArray[i]}<\/a>`, `gi`);

            toremove.innerHTML = toremove.innerHTML.replace(reg, '');
            console.log('Test: ' + reg);
        }
    }
}
window.onload=start;
</script>

</head>
<body>

<div class="777">
<p>Не изменяемый пример: 
<a href="#1" class="linkTagPost">Вася</a>
<a href="#2" class="linkTagPost">Дима</a>
<a href="#3" class="linkTagPost">Лена</a>
<a href="#3" class="linkTagPost">Ита</a>
<a href="#4" class="linkTagPost">Вита</a>
<a href="#4" class="linkTagPost">Зита</a>
<a href="#4" class="linkTagPost">Гита</a>
<a href="#5" class="linkTagPost">Витя</a>
<a href="#6" class="linkTagPost">Митя</a>
</div>

<div class="TgListPosts"> 
<p>Изменяемый пример 01: 
<a href="#1" class="linkTagPost">Вася</a>
<a href="#2" class="linkTagPost">Дима</a>
<a href="#3" class="linkTagPost">Лена</a>
<a href="#3" class="linkTagPost">Ита</a>
<a href="#4" class="linkTagPost">Вита</a>
<a href="#4" class="linkTagPost">Зита</a>
<a href="#4" class="linkTagPost">Гита</a>
<a href="#5" class="linkTagPost">Витя</a>
<a href="#6" class="linkTagPost">Митя</a>
<p>Изменяемый пример 02: 
<a href="#1" class="linkTagPost">Вася</a>
<a href="#2" class="linkTagPost">Дима</a>
<a href="#3" class="linkTagPost">Лена</a>
<a href="#3" class="linkTagPost">Ита</a>
<a href="#4" class="linkTagPost">Вита</a>
<a href="#4" class="linkTagPost">Зита</a>
<a href="#4" class="linkTagPost">Гита</a>
<a href="#5" class="linkTagPost">Витя</a>
<a href="#6" class="linkTagPost">Митя</a>
</div>

</body>
</html>
→ Ссылка

licensed under cc by-sa 3.0 with attribution.