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

- Henrik Petterson

---

不错的问题。我想看到一个也适用于移动浏览器的方法。 - Gary Woods

可能是重复的问题：选择元素中的文本（类似于用鼠标进行高亮）。 - Jack Guy

дҪ жҳҜеңЁиҜҙCSSдёӯзҡ„cursor:pointerеҗ—пјҹ - Sumit Sahay

@HenrikPetterson 等等，你是想用特定的背景颜色来突出文本吗？就像在电脑上复制文本时一样？ - James111

这个回答解决了你的问题吗？如何在点击时选择一个 span 的文本？ - undefined

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>

- maioman

---

这正是我的意思，但我想使用 .html() 输出文本，并在页面加载时选择用 <span> 包装的文本，而不是在单击时选择。 - Henrik Petterson

谢谢您的更新，尽管.html()是通过ajax添加的（在页面加载后）。很抱歉我没有正确澄清这一点。您能否调整您的代码，通过ajax输出.html()并选择span标签内的文本？当符合条件时，我将用50个积分奖励这个努力。谢谢！这让我整天都很头痛。 - Henrik Petterson

重点是在内容添加后立即调用函数，如果您遇到问题，请打开一个新的问题。 - maioman

...Lorem ipsum 我的老朋友。我又来和你聊天了。因为一个梦幻般的愿景在我睡觉时悄悄地出现了“Hello World”... - Sean Kendle

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

- Heemanshu Bhalla

---

@Henrik Petterson 这可以帮助你选择光标。 - Heemanshu Bhalla

setSelectionRange 只在 <input> 或 <textarea> 元素中有效，而 OP 引用了一个 <span>。 - OfirD