選擇span標記內的文本

Question

在考慮瀏覽器兼容性時，在span標記中選擇文本的方法是什么？ 例如，我有：

jQuery().html('<p>Hello world <span>lorem ipsum</span> my good friend!');

我希望lorem ipsum部分被光標選中。

我有這個代碼選擇文本：

function SelectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

Answer 1

你的意思是這樣的？

  var i = 0; function SelectText(element) { var doc = document , text = doc.querySelectorAll(element) , range, selection ; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text[i]); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text[i]); selection.removeAllRanges(); selection.addRange(range); } i++; if ( i === text.length ) i = 0; } document.onclick = function(e) { if (e.target.className === 'click') { SelectText('span'); } }; 

 <div>Hello world <span>lorem ipsum</span> my good friend!</div> <div>Hello world <span>lorem ipsum</span> my good friend!</div> <p class="click">Click me!</p> 

如果您只需要選擇一個標記元素，則可以使用querySelector而不是querySelectorAll

---

這是.html（）的一個例子

 $(function() { $('body').html('<p>Hello world <span>lorem ipsum</span> my good friend!'); }) function SelectText(element) { var doc = document , text = doc.querySelector(element) , range, selection ; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } window.onload = function() { SelectText('span'); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

HTML代碼

<input type="text" name="firstName" value="Enter your name..." />

JS代碼

//SELECT TEXT RANGE
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};
$('input[name=firstName]').focus().selectRange(5,10);

點擊這里永久鏈接到jsfiddle

 //SELECT TEXT RANGE $.fn.selectRange = function(start, end) { return this.each(function() { if (this.setSelectionRange) { this.focus(); this.setSelectionRange(start, end); } else if (this.createTextRange) { var range = this.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } }); }; $('input[name=firstName]').focus().selectRange(5,10); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="firstName" value="Enter your name..." />