获取所选文本javascript的跨度标签名称答案

【问题标题】：get the span tag name of selected text javascript获取所选文本javascript的跨度标签名称
【发布时间】：2023-03-14 01:29:02
【问题描述】：

如何获取所选文本的跨度名称：

 <Span class='class1'> text2 text3 text4 text5 </span> text6

当用户选择 text4 时，我想获取 Span=Class1

任何答案都可以提供帮助（在 Jquery 或 Rangy 中或...）

【问题讨论】：

尝试使用onselect事件w3schools.com/jsref/event_onselect.asp

标签： javascript html rangy

【解决方案1】：

这是一个可能有帮助的函数：

function getSelectionParentElement() {
    var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
    }
    return parentEl;
}

取自Get parent element of a selected text，作者：Tim Down

【讨论】：

【解决方案2】：

$('span').on('click', function(){
var classes = $(this).attr('class');
console.log(classes)   //if there are more than one class do classes.split(' ')
})

极度未经编辑的小提琴https://jsfiddle.net/tvp0q761/

【讨论】：

【解决方案3】：

这是一个普通的 JS 方法。它假定您将拥有多个跨度，因此 querySelectorAll 而不是 querySelector。

HTML

<span class="class1"><p>text2</p><p>text3</p><p>text4</p></span>
<span class="class2"><p>text2</p><p>text3</p><p>text4</p></span>
<span class="class3"><p>text2</p><p>text3</p><p>text4</p></span>

var spans = [].slice.call(document.querySelectorAll('span')).forEach(function (el) {
    el.onclick = showParentInfo;
});

function showParentInfo() {
    console.log(this.nodeName + '=' + this.className)   
}

DEMO

【讨论】：

它工作得很好，但我正在使用一个按钮来打印并提醒所选单词的类别。我应该如何进行
恐怕我对rangy一无所知。我确实更改了我的代码，以便当您双击它（选择它）时它会提醒文本的类。 Does this help?