JavaScript / jQuery getSelection Highlight merging the span html element

Question

function highlight_text(sel) {
  span = htmlSpanHlt();
  if (sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  span.appendChild(range.extractContents());
  range.insertNode(span);
}

function htmlSpanHlt() {
  element = document.createElement("span");
  element.setAttribute('class', 'hlt');
  return element;
}

.hlt {
 background: yellow; 
}

<div class="highlight">
  <p>
    <span class="hlt">Lorem</span> ipsum dolor sit amet, zril accusata postulant at ius. Dicat etiam luptatum ea pri. Duo docendi vulputate dissentiet ut, tollit bonorum duo eu. Maiorum adolescens scriptorem usu eu, sit idque facer causae ei. Choro nostrum at pro, sumo essent suscipiantur pri ex. Quo case veritus definiebas eu, sit postulant dissentias ei.<br>
    <br>
    Mel cu porro decore, cum et simul recteque inciderint. His ne omnes sententiae, ut omittantur dissentiet accommodare sed. Pro minim necessitatibus ne, no malis integre quo. Sed utroque molestiae interpretaris ne. Oportere indoctum at has, te sale semper eum, ea nam vitae dissentiet.
  </p>
</div>

The word "Lorem" has a classname "hlt" which was already been highlighted. What I want is: if I want to highlight another text including the word "Lorem" w/c is already been highlighted. I want to merge their span html element. Example: If I highlight "ipsum" next to the word "Lorem" and I include also "Lorem" the result will be Lorem Ipsum. Can someone help me? Thank u.

digglemister · Accepted Answer · 2016-08-01 16:25:34Z

1

How about this?

function highlight_text(sel) {
   var hlt_element = document.getElementsByClassName('hlt')[0];
   if (!hlt_element || sel.containsNode(hlt_element,true)) {
      add_hlt_element(sel);
   }
}

function add_hlt_element(sel) {
   var element = document.createElement("span");
   var range = sel.getRangeAt(0);
   element.setAttribute('class', 'hlt');
   element.innerHTML = sel.toString().replace(/(?:\r\n|\r|\n)/g, '<br />\n');
   range.deleteContents();
   range.insertNode(element); 
   var highlight_div = document.getElementsByClassName("highlight")[0];
   highlight_div.innerHTML = highlight_div.innerHTML.replace('</span><span class="hlt">','');
}

window.onmouseup = function() {
   var sel = window.getSelection();
   highlight_text(sel);
}

.hlt {
    background: yellow; 
}

<div class="highlight">
  <p>
    Lorem ipsum dolor sit amet, zril accusata postulant at ius. Dicat etiam luptatum ea pri. Duo docendi vulputate dissentiet ut, tollit bonorum duo eu. Maiorum adolescens scriptorem usu eu, sit idque facer causae ei. Choro nostrum at pro, sumo essent suscipiantur pri ex. Quo case veritus definiebas eu, sit postulant dissentias ei.<br>
    <br>
    Mel cu porro decore, cum et simul recteque inciderint. His ne omnes sententiae, ut omittantur dissentiet accommodare sed. Pro minim necessitatibus ne, no malis integre quo. Sed utroque molestiae interpretaris ne. Oportere indoctum at has, te sale semper eum, ea nam vitae dissentiet.
  </p>
</div>

edited Aug 1, 2016 at 16:25

answered Jul 29, 2016 at 5:31

digglemister

1,4873 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Starbuks Cebu Hiking Trail Over a year ago

thank u. but nothing will happen. and i can't highlight any text. and also the user can continue highlight and the override highlight their span will be merge.

Starbuks Cebu Hiking Trail Over a year ago

ahh yeah it works actually. but that is only an example.the starting of the page there will be no highlight(s) should be, lorem is only an example after the user highlighted the text. if i highlighted lorem or any text then it will be highlighted. and if i override and expand my highlight the span will merge. your first answer that is right but it can only highlight one word.

Starbuks Cebu Hiking Trail Over a year ago

and also it won't work if i started highlighting in the second letter and so on,,

Starbuks Cebu Hiking Trail Over a year ago

your code is great. there is only two things missed. first: the user can start override the 2nd or 3rd letter and so on. and next the user can highlight the unhighlighted text and it will create a new span

Starbuks Cebu Hiking Trail Over a year ago

yeah great. but i there is something with html structure. first it will not merge the span. example first i highlighted the "Lorem ipsum" the result will be <span class="hlt">Lorem ipsum</span> and that is correct. Then if I highlight again and override until the word "dolor sit" the result should be <span class="hlt">Lorem ipsum dolor sit</span>. it should not be span.hlt inside the span.hlt. u have really great logic

|

Collectives™ on Stack Overflow

JavaScript / jQuery getSelection Highlight merging the span html element

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related