Is there a way to merge divs together to form one div?

Question

I am working on a project where users can work around with a list of information. I'll explain with the code below.


  
     1The earth is spherical
  
  
     2There is no gravity in space
  
  
     3The earth is made up of more water
  
  
     4There is a lunar year every four years
  
  
     5Every lunar year has 366 days
  
  
     6The earth is spherical
  
  
     7The earth is spherical

Now this is pretty straightforward. If a user clicks or highlights any of the facts, an options tab pops up enabled by javascript where the user has options to do a lot of things like copying, saving or sharing each fact. If a user highlights say fact 5 and chooses to save it, the preview prompt shows something like this:

/*
FACT 5

Every lunar year has 366 days

Now here's my problem: I want to be able to allow a user highlight multiple facts at the same time and I can't find a way to do it. If a user finds fact 1 through 4 interesting and highlights it, I want the preview to be something like this:

/*
FACT 1 to 4

1 The earth is spherical
2 There is no gravity in space
3 The earth is made up of more water
4 There is a lunar year every four years
*/

The user should also be able to choose any multiple facts. Also, the facts are called out from a database using PHP, so, I don't know how many facts there are or what the contents are.

I have tried using the window.getSelection() method. I tried using "fact-num" class so that when I got the content of the highlighted area, I could search for the classes inside it - like so:

function factFunction(factNum) {
  var sel = window.getSelection();
  var factNumLength = sel.querySelectorAll('.fact-num').length;
  if(factNumLength > 1){ //checking if it is a multiple highlight or not
    var factStart = sel.querySelectorAll('.fact-num')[0].innerHTML;
    var factStop = sel.querySelectorAll('.fact-num')[factNumLength - 1].innerHTML;
    var preview = "Fact "+factStart+" to "+factStop;
    preview += "
"+sel.toString();
    document.getElementById('previewFact').innerHTML = preview;
  }else{
    var preview = "Fact "+factNum;
    preview += "
"+sel.toString();
    document.getElementById('previewFact').innerHTML = preview;
  }
}

This isn't the entire block of code as it is much longer, but this is the general structure of the entire thing and it's not working. I don't know if I am supposed to use the value of the window.getSelection() as I am using it.

I would really appreciate any help as I have spent the whole of yesterday and most of today looking for answers.

Thank you

Edit

Just so I'm properly understood, when highlighted like this: It should show this:

t.niese · Accepted Answer

I wasn't able to find anywhere in the specification that Selection provides querySelectorAll but even if it would exist, containsNode with true for partial might be the better choice.

Furthermore, you want to utilize event delegation instead of attaching the event handler to every element. That way you are more flexible about the logic you want to apply.

With data- attributes you can give the elements some additional semantic information like your facts id.

I cloned the facts elements in displayFactsResult but you can for sure change that again to match your desired output.

The final code could look something like this (with further comments what each part of the code does):

function displayFactsResult(array) {
  const previewFact = document.getElementById("previewFact");

  // empty the facts preview
  previewFact.innerHTML = '';

  // create the info how many slected
  const infoNode = document.createElement('div')
  if (array.length == 1) {
    infoNode.textContent = 'Fact ' + array[0].dataset.fact
  } else if (array.length > 1) {
    infoNode.textContent = 'Facts ' + array[0].dataset.fact + ' to ' + array[array.length-1].dataset.fact
  }
  previewFact.appendChild(infoNode)

  // clone each of the selected facts and append them to the preview
  array.forEach(node => {
    previewFact.appendChild(node.cloneNode(true));
  })

}

// use event delegation instead of attaching the event handler to each element
document.querySelector('.facts').addEventListener('mouseup', (e) => {

  // traverse the DOM up until on element with `data-fact` or `.facts` element is reached
  let element = e.target
  while (element != e.currentTarget && !element.dataset.fact) {
    element = element.parentNode;
  }

  // get the selection
  var sel = window.getSelection();

  // get all elements, and filter by those in the selection
  var factsInSelection = Array.from(document.querySelectorAll('[data-fact]'))
    .filter(node => {
      return sel.containsNode(node, true)
    });

  if (factsInSelection.length > 0) {
    // if there is at least one fact selected pass it to the display function
    displayFactsResult(factsInSelection)
  } else if (element.dataset.fact) {
    // if the element at which we stopped traversing has `data-fact` use this to display
    displayFactsResult([element])
  } else {
    displayFactsResult([])
  }
})


  
    1The earth is spherical
  
  
    2There is no gravity in space
  
  
    3The earth is made up of more water
  
  
    4There is a lunar year every four years
  
  
    5Every lunar year has 366 days
  
  
    6The earth is spherical
  
  
    7The earth is spherical

Is there a way to merge divs together to form one div?

Answers (2)

Related Questions