Spotting repeated terms within an HTML document

Question

Spotting repeated terms within an HTML document

I have a table with results generated using v-html (meaning the text inside the table does not appear until the page is rendered). I want to compare two rows and highlight any duplicate words they may contain.

While looking for examples, I came across a project that showcased what I need, although it was more complex than necessary. This question on Stack Overflow resembles mine, but it requires defining the words rather than letting the page identify them automatically.

For instance, here's an illustration of the desired output:

<table>
  <tr>
    <td v-html="link.orderdesciption">
    order:<br />
   <mark> TV </mark><br /> <!--note that the contents of the td would not appear in markup due to being v-html-->
    PS3 <br />
    Laptop
    </td>
    <td>
    qty:<br />
    1<br />
    2<br />
    1<br />
    </td>
  </tr>
  <tr>
    <td>
    ----------------
    </td>
    <td>
    ----------------
    </td>
  </tr>
  <tr>
    <td v-html="link.orderrecieved">
    recieved:<br /> <!--same note as above, v-html only shows-->
    <mark> TV </mark><br />
    Desktop<br />
    </td>
  </tr>
</table>

I've been attempting to work on this issue, but I'm unsure about the next steps:

var text = $('td').text(),
    words = text.split(' '),
    sortedWords = words.slice(0).sort(),
    duplicateWords = [];


for (var i=0; i<sortedWords.length-1; i++) {
    if (sortedWords[i+1] == sortedWords[i]) {
        duplicateWords.push(sortedWords[i]);
    }
}
duplicateWords = $.unique(duplicateWords);

Any advice or guidance would be greatly appreciated,

javascript jquery html css vue.js

Answer 1

Answer №1

To find the duplicate words, utilize the reduce method, then loop through the tds to check if the text is included in the duplicate words Array. If it is, enclose the text within mark tags.

const tds = document.querySelectorAll('td');

const groupByOccurence = [...tds].reduce((accu, td) => {
  const textArr = td.innerHTML.split('<br>').map((word) => word.trim()).filter((word) => word.length > 0 && word.match(/[a-zA-Z]+/g));
  textArr.forEach((text) => {
    accu[text] = (accu[text] || 0) + 1;
  });
  return accu;
}, {});

const duplicateWords = Object.entries(groupByOccurence).filter(([_, val]) => val > 1).map(([key, _]) => key);

tds.forEach((td) => {
  const textArr = td.innerHTML.split('<br>').map((word) => word.trim());
  let str = "";
  textArr.forEach((text) => {
    if (duplicateWords.includes(text)) {
      str += '<mark>' + text + '</mark><br>';
    } else {
      str += text + '<br>';
    }
    td.innerHTML = str;
  })
});

const trs = document.querySelectorAll('tr');

trs.forEach((tr, i) => {
  const specialChartds = [...tr.querySelectorAll('td')].filter((td) => !td.textContent.match(/[a-zA-Z]+/g));
  if (!specialChartds) {
    tr.append(tds[i]);
  }
});

<table>
  <tr>
    <td>
      order:<br /> TV
      <br /> PS3 <br /> Laptop
    </td>
    <td>
      qty:<br /> 1
      <br /> 2
      <br /> 1
      <br />
    </td>
  </tr>
  <tr>
    <td>
      ----------------
    </td>
    <td>
      ----------------
    </td>
  </tr>
  <tr>
    <td>
      recieved:<br /> TV <br /> Desktop
      <br />
    </td>
  </tr>
</table>

Answer 2

To find the duplicate words, utilize the reduce method, then loop through the tds to check if the text is included in the duplicate words Array. If it is, enclose the text within mark tags.

const tds = document.querySelectorAll('td');

const groupByOccurence = [...tds].reduce((accu, td) => {
  const textArr = td.innerHTML.split('<br>').map((word) => word.trim()).filter((word) => word.length > 0 && word.match(/[a-zA-Z]+/g));
  textArr.forEach((text) => {
    accu[text] = (accu[text] || 0) + 1;
  });
  return accu;
}, {});

const duplicateWords = Object.entries(groupByOccurence).filter(([_, val]) => val > 1).map(([key, _]) => key);

tds.forEach((td) => {
  const textArr = td.innerHTML.split('<br>').map((word) => word.trim());
  let str = "";
  textArr.forEach((text) => {
    if (duplicateWords.includes(text)) {
      str += '<mark>' + text + '</mark><br>';
    } else {
      str += text + '<br>';
    }
    td.innerHTML = str;
  })
});

const trs = document.querySelectorAll('tr');

trs.forEach((tr, i) => {
  const specialChartds = [...tr.querySelectorAll('td')].filter((td) => !td.textContent.match(/[a-zA-Z]+/g));
  if (!specialChartds) {
    tr.append(tds[i]);
  }
});

<table>
  <tr>
    <td>
      order:<br /> TV
      <br /> PS3 <br /> Laptop
    </td>
    <td>
      qty:<br /> 1
      <br /> 2
      <br /> 1
      <br />
    </td>
  </tr>
  <tr>
    <td>
      ----------------
    </td>
    <td>
      ----------------
    </td>
  </tr>
  <tr>
    <td>
      recieved:<br /> TV <br /> Desktop
      <br />
    </td>
  </tr>
</table>

Answer 3

Answer №2

To achieve the desired outcome, follow the instructions below:

Iterate through each table element to retrieve all words
Create an array with duplicate words from the previous step using the filter method
Loop through all table cells and mark duplicate words with a tag


var text = $('table');
var arr = [];

//Step 1: Getting All words from table
var words = text.each(function(){
   let val = $(this).text().replace(/\n|\r/g,' ').split(' ').filter(Boolean);
   arr.push(...val)
})


//Step 2: Finding duplicate words
let duplicate = arr.filter(function(value,index,self){ return (self.indexOf(value) !== index && isNaN(parseInt(value)) && value.match(/[A-Za-z]/) !== null)})


//Step 3: Marking duplicate words in each row
$('td').each(function(){
   let val = $(this).text();
   let openMark = '<mark>'
   let closeMark = '</mark>'
   duplicate.forEach(v => {
      if(val.indexOf(v) !== -1){
          var html = $(this).html().replace(v, openMark + v + closeMark)
          $(this).html(html)
      }
   })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    order:<br />
   TV<br />
    PS3 <br />
    Laptop
    </td>
    <td>
    qty:<br />
    1<br />
    2<br />
    1<br />
    </td>
  </tr>
  <tr>
    <td>
    ----------------
    </td>
    <td>
    ----------------
    </td>
  </tr>
  <tr>
    <td>
    received:<br />
    TV<br />
    Desktop<br />
    </td>
  </tr>
</table>

Check out the code in action on CodePen: here

Answer 4

To achieve the desired outcome, follow the instructions below:

Iterate through each table element to retrieve all words
Create an array with duplicate words from the previous step using the filter method
Loop through all table cells and mark duplicate words with a tag


var text = $('table');
var arr = [];

//Step 1: Getting All words from table
var words = text.each(function(){
   let val = $(this).text().replace(/\n|\r/g,' ').split(' ').filter(Boolean);
   arr.push(...val)
})


//Step 2: Finding duplicate words
let duplicate = arr.filter(function(value,index,self){ return (self.indexOf(value) !== index && isNaN(parseInt(value)) && value.match(/[A-Za-z]/) !== null)})


//Step 3: Marking duplicate words in each row
$('td').each(function(){
   let val = $(this).text();
   let openMark = '<mark>'
   let closeMark = '</mark>'
   duplicate.forEach(v => {
      if(val.indexOf(v) !== -1){
          var html = $(this).html().replace(v, openMark + v + closeMark)
          $(this).html(html)
      }
   })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    order:<br />
   TV<br />
    PS3 <br />
    Laptop
    </td>
    <td>
    qty:<br />
    1<br />
    2<br />
    1<br />
    </td>
  </tr>
  <tr>
    <td>
    ----------------
    </td>
    <td>
    ----------------
    </td>
  </tr>
  <tr>
    <td>
    received:<br />
    TV<br />
    Desktop<br />
    </td>
  </tr>
</table>

Check out the code in action on CodePen: here

Spotting repeated terms within an HTML document

Answer №1

Answer №2

Similar questions

Attempting to utilize Ajax to save a file in Laravel, however unsure of what may be causing the issue in my code

Retrieve the HTML element by providing its specific index within the DOM structure of the document

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

Idea fails to detect imports

Access a three.js scene from a canvas element within the local environment to make alterations

Uncovering Modified Form Elements Using jQuery

Achieving full-screen fill with inline SVG

Is there a jQuery substitute for Prototypes Form.Request using AJAX?

Tips for dynamically changing the style (color/fill) of material-ui elements when generating them within a map function

Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

Glowing effects on svg shapes

Getting the value from a label and then setting it as the innerHTML of document.getElementById('label')

AngularJS $location Redirect Error: Property 'path' Undefined

In certain situations, the JavaScript code runs either before or after the print dialog is displayed when using the window

Transforming an SQL Query into JSON format using Oracle 11g in Oracle Application Express (APEX)

Tips on ensuring the first column of an HTML table remains fixed in responsive design

What is the way to change the background color using HTML5 getItem?

The JavaScript code is unable to locate a specific variable in the file

When using PHP files to send data through AJAX, be cautious of receiving only a "parsererror" message

Retrieving a map using latitude and longitude coordinates saved in a database