在span标签内选择文本

Question

在考虑浏览器兼容性时，在span标签内选择文本的方法是什么？例如，我有：

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

我希望lorem ipsum部分将被选择光标。

我有这个code它选择文本：

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

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); 

Click Here For Permanent link to 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..." />

Answer 2

你的意思是这样的吗？

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>