javascript - jquery 如何知道所选/突出显示文本的顺序出现

标签 javascript jquery highlight highlighting

我正在测试一个小型演示

例如,我在标签中有这样的文本

<body>

good morning, good morning

abcdef ajska
good morning
ssssss
<body>

例如,当我选择(突出显示)第二个“早上好”时, 我怎么知道这是该文本第二次出现?

如果我选择“abcdef ajska”, 我怎么知道这是第一次出现此文本?

所以当我选择一个段落时, 我怎样才能知道这个段落的出现顺序?

这是一个关于选择的演示,

https://medium.com/what-i-learned-today/2c5ec46b86d0

但我只是想要一个人 使用鼠标选择一个段落,将显示类似警告框的提示 并让我知道所选段落的出现顺序?

非常感谢。 谢谢

最佳答案

我想我明白你想要实现的目标,我有一个想法,虽然它并不可靠,但也许这可以给你一个良好的开端。

获取突出显示的文本并找到正文中所有相似的文本并将其用 <span> 包裹起来。然后获取<span>索引来确定突出显示文本的出现。

我们可以通过获取鼠标 click 来获取该出现值事件坐标。然后找到<span>位于该坐标上并检索其索引。

我们得到突出显示的文本:

var text;
if(window.getSelection){
    text = window.getSelection().toString();
}else if (document.selection && document.selection.type != 'Control'){
    //for IE prior to 9
    text = document.selection.createRange().text;
}

然后检查文本是否不为空或不包含空格,并用span包裹所有相似的文本:

if($.trim(text).length){
    //wrap each word similar to the highlighted text with <span>
    var regex = new RegExp(text,'g')
    $('body').html($('body').html().replace(regex, '<span>'+text+'</span>'));
}

现在一切都包装好了,我们需要获取原始的点击坐标:

$('body').on('click',function(e){
//get the x and y coords
var offset = $(this).offset(),
    x = e.clientX - offset.left,
    y = e.clientY - offset.top,
})

获取位于该坐标上的新跨度:

var el = document.elementFromPoint(x, y)

这是jsfiddle

关于javascript - jquery 如何知道所选/突出显示文本的顺序出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20390971/

相关文章:

javascript - 使用 sidebar.js/jQuery 将不透明层添加到 HTML 部分

javascript - jQuery $(this) 返回 [object Object]

javascript - 在 D3 力导向图中突出显示所选节点、其链接及其子节点

vim - ViM 中的 CursorLine 高亮显示,仅高亮显示行号和行首/行尾的空格/制表符

javascript - TinyMCE 4 自定义插件 - 从 iframe 获取值(value)

javascript - Firefox 元素高度问题

javascript - 如何通过 Javascript 将顺序类名附加到 <li>

javascript - 使 onclick 只影响该元素,而不影响它的子元素

jQuery Slide to left right on a spitted Page

php - 在 mysql php 搜索中突出显示搜索词