Question 239300 in Html Question posted in
Some basic documentation can be found here.

removing duplicate <strong> tags in HTML Collection

I have paragraph and some of the words are displayed using <strong> tag.
For instance, this text include <strong>MyWord</strong> which I intend to use for learning vocabulary. There’s also <strong>another word</strong> highlighted. This paragraph consists of tens of strong words.

I am aiming to obtain an HTMLCollection of unique strong words.

Initially when I use getElementsByTagName("strong").length, It contains duplicate strong words and the actualy length of unique words is not correct.
How can I remove HTMLCollections or uniquely identify collection of strong words?

Tags:

4

Answers


  1. 0

    Here’s an approach

    const strongElements = document.getElementsByTagName("strong");
const uniqueWordsSet = new Set();

[...strongElements].forEach((strongElement) => {
    const word = strongElement.textContent.trim();
    uniqueWordsSet.add(word);
});

const uniqueWordsArray = [...uniqueWordsSet];
console.log(`Unique words length: ${uniqueWordsArray.length}`);
    Login or Signup to reply.
  2. 0

    Here is an example:

    let strongTagList=document.getElementsByTagName("strong");
let counts={};
for (let strongTag of strongTagList){
 if (counts[strongTag.textContent]){
    counts[strongTag.textContent]++;
 } else {
    counts[strongTag.textContent]=1;
 }
}
console.log(counts)
    <strong>2</strong>
<strong>3</strong>
<strong>3</strong>
<strong>1</strong>
<strong>1</strong>
<strong>1</strong>
    Login or Signup to reply.
  3. 0

    After you get the list of words (by getting the texts from the <strong> elements), you can remove duplicates by running it through a Set constructor:

    let words = Array.from(document.querySelectorAll("strong"), 
    el => el.textContent.trim()
);
words = [...new Set(words)]; // This removes duplicates
console.log(words.length); // 2
    There is <strong>MyWord</strong> which I intend to use for learning 
vocabulary. There's also <strong>another word</strong>, but then again
<strong>MyWord</strong>, which is duplicate and should not be counted.
    Login or Signup to reply.
  4. 0

    The easiest way would be to use a Set like this:

    const output = document.querySelector('#output')
  const dedupeStrongWords = () => {
    const strongElements = document.querySelectorAll('strong');
    const strongWords = new Set();
    for (const e of strongElements) {
      strongWords.add(e.innerText.toLowerCase().trim());
    }
    output.innerText = Array.from(strongWords).join(', ')
  };
  dedupeStrongWords();
    <p>
  This is a <strong>paragraph</strong> where some words are marked as <strong>strong</strong>.
  <strong>Strong</strong> words should be <strong>deduped</strong> somehow.
  The easiest way is using <strong>sets</strong>.
</p>
<div>
  Deduped strong words: <span id="output"></span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search