在给定文本选择的情况下查找某个类的前一个元素，而不考虑 DOM 结构答案

【问题标题】：Finding previous element of a certain class, given a text selection, regardless of DOM structure在给定文本选择的情况下查找某个类的前一个元素，而不考虑 DOM 结构
【发布时间】：2020-10-29 15:26:21
【问题描述】：

如附图中所示，我的目标是选择一个文本，例如“在 Helvetici 中”，然后在 nMarker 类的元素中找到选择之前的元素。

换句话说，我想选择“在 Helvetici 中”并以某种方式找到 nMarker 类的元素，它的 data-marker 等于 1。

不幸的是，我没有一次机会使用 jQuery prevAll、prev、closest 等，因为 DOM 是未知的，所以我无法计算父母、祖先等，因为标记位于多个单词之后，遵循算法（这是我无法更改的要求）。

到目前为止，我所做的是实现了这个 cos，如果选择位于标记所在的同一元素中，它就可以工作。但正如我所说，我想要一个在不知道 DOM 结构的情况下工作的解决方案。

var sel = window.getSelection ? window.getSelection() : document.selection.createRange();
if(sel.getRangeAt){ // That’s for Firefox
    var range = sel.getRangeAt(0);
    var newNode = document.createElement("span");
    newNode.setAttribute('class', 'justSelected');
    range.surroundContents(newNode);

    $(".justSelected").prevAll(".nMarker").data( "marker")
}

【问题讨论】：

在 stab 中，给您一些考虑：签入当前节点后，循环 $(this).parents() 节点，在每个父节点上运行 .find(".nMarker").last()，如果找到则中断，否则继续
这个标记是否总是与标记文本处于同一“祖先级别”？我的意思是，您在示例中标记的文本位于一个段落中，而您正在寻找的标记位于 sibling 段落内——或者它可能位于其他任意位置？ <div><marker/><p>…marked text…</p></div> 或 <div><p><marker/></p></div> <p>…marked text…</p> 之类的东西也会出现吗？
@CBroe 不，问题正是这个。标记可以在任何地方。不幸的是，我必须处理非标准的 ePub，所以它们可以在任何地方，所以是的，它可以发生你所说的。下面我发布了一个放弃 HTML/jQuery 方法的可能答案。但它仅适用于HTML（章节）文件中的选择唯一。 span>
我猜你应该从类似stackoverflow.com/a/1335347/1427878 这样的东西开始，以获取当前选择所在的元素。一旦你有了它，它就变成了 DOM 遍历的问题（循环遍历以前的兄弟姐妹） , 在那里签入，如果没有找到标记，则向上移动到下一个公共父元素，重复该过程……）
你在“实现这个cose”中的“cose”是什么意思？

标签： javascript jquery dom

【解决方案1】：

使用非 jQuery 方法，我这样管理它：

var body = $("body").text();
var toFind = window.getSelection().toString();
var strRegEx = '{:(?:(?!{:).)*?'+toFind; 
var res = body.match(strRegEx);
console.log(res);
var regExp = /\{:([^)]+)\:}/;
var matches = regExp.exec(res[0]);
alert(matches[1]);

无论如何，这并不能完全回答问题（我想获得 data-marker 属性），但现在我得到了相同的数字。但是，这只有在所选内容在整个文本中是唯一的情况下才有效。

【讨论】：