Question

如何获取所选文本的范围名称：

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

当用户选择text4然后我想得到Span = Class1

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

Answer 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

Answer 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/

Answer 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>

<强> JS

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

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

DEMO

获取所选文本javascript的span标记名称

3 个答案: