Overwrite highlighted text on mouseup text selection+ HTML5/jQuery

问题

I have some content generated by a ML model in 100s of paragraphs, each para has some highlighted content.

Sometimes, highlighted data is incorrect, we want the user to select the text and get it highlighted again to correct it.

<p> Contrary to popular belief, <span class='highlighted'>Lorem</span>Ipsum is not simply random text. It has roots in a piece of popular classical Latin literature from 45 <span class='highlighted'>BC</span>, making it over 2000 years old.</p>

In this example, the user might want to select:

Lorem Ipsum
Latin
45 BC
2000 years

Below code works for #2 and #4, but I am not able to do it for #1 and #3 as its already highlighted.

I am using this function getSelectionText() to select the text.

$('div.content>p').on('mouseup', function(e){
    var toselected = getSelectionText();
    var para = $(this).html();
    var start = para.indexOf(toselected);
    var end = start + toselected.length;
    var html = para.replace(toselected, '<span class="highlighted">' toselected + '</span>');
    var obj = {"content": $(this).text(), "indices_range":[[start, end]]}
    $.post('/update/<content_id>', data:tojson(obj), function(){        $(e.target).html(html);}) 

});

Also wondering, how can I get the start, end indices if same text occurs twice or multiple times eg. popular.?

回答1:

Use Range and Selection APIs to control selection of text nodes. Instead of using <span>, use <mark> tags.
Reasons to use <mark>

100% semantic
It's use is uncommon which means there's very little chance of CSS selector conflicts.
By default it already highlights it's content.

Usage: Highlight text with mouse like you would normally. The <mark>s do not nest (that's a good thing). In order to remove a highlighted area, click it using the right mouse button.

const mark = event => {
  const current = event.currentTarget;
  const target = event.target;
  const select = document.getSelection();
  if (event.which === 1) {
    const range = select.getRangeAt(0);
    const text = range.toString();
    const content = range.extractContents();
    const mark = document.createElement('MARK');
    mark.textContent = text;
    range.insertNode(mark);
  } else if (event.which === 3) {
    event.preventDefault();
    if (target.tagName === 'MARK') {
      const text = target.textContent;
      const tNode = document.createTextNode(text);
      target.parentNode.replaceChild(tNode, target);
    }
  }
  select.removeAllRanges();
  current.normalize();
  return false;
}

$(document).on("contextmenu mouseup", mark);

::selection {
  background: tomato;
  color: white;
}

<p> Contrary to popular belief, <mark>Lorem</mark>Ipsum is not simply random text. It has roots in a piece of popular classical Latin literature from 45 <mark>BC</mark>, making it over 2000 years old.</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

来源：https://stackoverflow.com/questions/55364034/overwrite-highlighted-text-on-mouseup-text-selection-html5-jquery

标签

javascript

jquery

html5

highlight

textselection