JavaScript / jQuery getSelection高亮合并span HTML元素

Question

JavaScript / jQuery getSelection高亮合并span HTML元素

3

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>

单词“Lorem”具有一个名为“hlt”的类名，已经被突出显示。我的要求是：如果我想突出显示另一个包含已经突出显示的单词“Lorem”的文本。我希望合并它们的span html元素。例如：如果我在单词“Lorem”旁边突出显示“ipsum”，并且我还包括“Lorem”，结果将是Lorem Ipsum。有人可以帮我吗？谢谢。

- Roque Mejos

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- digglemister · Accepted Answer

这个怎么样？

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>