选择范围标记中的文本

Select text within span tag

本文关键字：文本 范围 选择      更新时间：2023-09-26

在考虑浏览器兼容性时，在 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);
    }
}

你的意思是这样的？

 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>

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..." />

相关文章：