كيف أحذف السلاسل (strings) المتشابهة من المصفوفة في JavaScript

يمكنك القيام بذلك عن طريق الكود التالي :

// متغير لتخزين اسم التاغ
let lastName = ""
// متغير لتخزين البيانات بعد فلترتها
let filterdData = [];
const data = [
  'a:href,title',
  'a:href,title,accesskey',
  'div:class',	
  'div:class,role,id',
  'h3:',
  'li:id',
  'ul:'
];
/ /forEach حلقة 
data.forEach(e => {
  // tag نحضر اسم الـ 
  const tagName = e.split(":")[0];
  // إذا كان مطابق لاسم اخر تاغ نقوم بإيقاف العملية
  if(tagName === lastName ) return 
  // وإلا نقوم بجعل اسم اخر تاغ هو اسم التاغ الحالي
  lastName  = tagName
  // ونضيف التاغ الحالي إلى البيانات متغير الملفلترة
  filterdData.push(tagName)    
})
console.log(filterdData)

يمكن القيام بذلك باستخدام حلقة for للمصفوفة والتحقق من وجود نفس اسم ال HTML tag في العناصر اللاحقة باستخدام ال regex الذي قمت بتحديده. يمكن استخدام دالة splice() لإزالة العناصر التي تم العثور عليها. 

const arr = [  'a:href,title',  'a:href,title,accesskey',  'div:class',  'div:class,role,id',  'h3:',  'li:id',  'ul:'];

for (let i = 0; i < arr.length - 1; i++) {
  const currentTag = arr[i].match(/\w+(?=\:)/)[0];
  for (let j = i + 1; j < arr.length; j++) {
    const nextTag = arr[j].match(/\w+(?=\:)/)[0];
    if (currentTag === nextTag) {
      arr.splice(i, 1);
      i--;
      break;
    }
  }
}

console.log(arr);
// Output: [ 'a:href,title,accesskey', 'div:class,role,id', 'h3:', 'li:id', 'ul:' ]

في هذا المثال ، يتم استخدام حلقتين متداخلتين للتحقق من وجود نفس اسم ال HTML tag في العناصر اللاحقة ، وإذا تم العثور على عنصر مماثل ، يتم استخدام دالة splice() لإزالة العنصر الحالي من المصفوفة. يتم تخفيض متغير الحلقة i بمقدار 1 للتأكد من تفقد العنصر الذي تم حذفه.

يتم طباعة المصفوفة الناتجة باستخدام console.log(arr) ويتم عرض المصفوفة النهائية التي تمت إزالة العناصر المطلوبة منها.

تستطيع الإعتماد على الطريقة التالية بالإَضافة للطرق السابقة:

من خلال دالة reduce() في JavaScript لتحقيق ذلك بطريقة أخرى.

حيث نستخدم reduce() للحفاظ على المصفوفة الأصلية وإعادة مصفوفة جديدة تحتوي على العناصر غير المكررة.

مع استخدام Map() لتخزين اسماء الـ HTML tag الفريدة، وتحديث ال Map() مع كل عنصر في المصفوفة الأصلية.

في النهاية ، تستطيع تحويل Map() إلى مصفوفة باستخدام الدالة Array.from().

const arr = [  'a:href,title',  'a:href,title,accesskey',  'div:class',  'div:class,role,id',  'h3:',  'li:id',  'ul:'];

const uniqueArr = Array.from(arr.reduce((map, current) => {
  const tagName = current.match(/\w+(?=\:)/)[0];
  return map.has(tagName) ? map : map.set(tagName, current);
}, new Map()).values());

console.log(uniqueArr);
// Output: [ 'a:href,title,accesskey', 'div:class,role,id', 'h3:', 'li:id', 'ul:' ]

لحذف أي عنصر من المصفوفة يحتوي على نفس اسم ال HTML tag للعنصر الذي بعده، يمكنك استخدام الوظيفة splice() لإزالة العنصر بناء على مؤشره . لكن قبل ذلك، يجب عليك تحديد المؤشرات التي تريد حذفها بواسطة حلقة تمر على المصفوفة وتقارن اسم ال HTML tag لكل عنصر مع العنصر التالي باستخدام ال regex pattern الذي ذكرته. هذا مثال على كيفية فعل ذلك:

javascript

// المصفوفة الأصلية
let array = [
    'a:href,title',
    'a:href,title,accesskey',
    'div:class',
    'div:class,role,id',
    'h3:',
    'li:id',
    'ul:'
];

// مصفوفة فارغة لتخزين المؤشرات التي تريد حذفها
let indices = [];

// حلقة تمر على المصفوفة من البداية إلى ما قبل النهاية
for (let i = 0; i < array.length - 1; i++) {
    // استخدام regex لتحديد اسم ال HTML tag باستخدام ال pattern \w+(?=\:)
    let tag = array[i].match(/\w+(?=\:)/)[0];
    // مقارنة اسم ال HTML tag مع العنصر التالي
    if (array[i + 1].startsWith(tag)) {
        // إضافة المؤشر إلى مصفوفة العناصر
        indices.push(i);
    }
}

// حلقة تمر على مصفوفة المؤشرات من النهاية إلى البداية
for (let j = indices.length - 1; j >= 0; j--) {
    // استخدام splice لحذف العنصر بناء على المؤشر
    array.splice(indices[j], 1);
}

// طباعة المصفوفة النهائية
console.log(array);

النتيجة هي:
 

[
'a:href,title,accesskey',
'div:class,role,id',
'h3:',
'li:id',
'ul:'
]