在mouseup文本选择+ HTML5/jQuery上覆盖突出显示的文本 [英] Overwrite highlighted text on mouseup text selection+ HTML5/jQuery
问题描述
我有一个由ML模型在几百个段落中生成的内容,每个段落都有一些突出显示的内容.
I have some content generated by a ML model in 100s of paragraphs, each para has some highlighted content.
有时候,突出显示的数据不正确,我们希望用户选择文本,然后再次突出显示以纠正它.
<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:
- 蜂胶
- 拉丁语
- 公元前45年
- 2000年
下面的代码适用于#2和#4,但是我已经无法突出显示它适用于#1和#3了.
Below code works for #2 and #4, but I am not able to do it for #1 and #3 as its already highlighted.
我正在使用此功能 getSelectionText()选择文本.
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);})
});
也想知道,如果相同的文本出现两次或多次,我如何获得开始索引,结束索引. popular
.?
Also wondering, how can I get the start, end indices if same text occurs twice or multiple times eg. popular
.?
推荐答案
使用选择 API进行控制选择文本节点.代替使用<span>
,而使用<mark>
标记.
使用 <mark>
Use Range and Selection APIs to control selection of text nodes. Instead of using <span>
, use <mark>
tags.
Reasons to use <mark>
- 100%语义
- 这种用法很少见,这意味着CSS选择器冲突的可能性很小.
- 默认情况下,它已经突出显示了其内容.
用法:像平常一样,用鼠标突出显示文本. <mark>s
不嵌套(这是一件好事).为了删除突出显示的区域,请使用鼠标右键单击它.
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>
这篇关于在mouseup文本选择+ HTML5/jQuery上覆盖突出显示的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!