添加后选择部分文本

Question

我有这个代码:

$sel = 'lorem ipsum';
jQuery(this).html('<p>Hello world ' + $sel +' great day!');

所以.html()通过ajax添加.

我希望在页面$sel上输出文本时选择文本(就像用户用光标突出显示它一样).

我有以下代码来选择元素:

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

如何使用该代码并仅选择其中的文本$sel？因此,输出html并选择$sel部分.

Answer 1

下面的函数(createSelectedSpan)接受一个参数,value.每次调用此函数时,都会创建sel一个值为spanelement 的新局部变量.将selinnerHTML设置为参数的值value.然后,sel作为一个孩子被采纳body.最后sel被选中.

除此之外,我已经修改了你的SelectText函数,将其中text定义的变量设置为DOM Node传递给它作为参数.

在选择新添加的元素并取消选择其他元素时,可以多次调用此函数而不会出现任何错误.

  function SelectText(element) {
  var doc = document,
    text = element,  // A modification is made here
    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);
  }
}

function createSelectedSpan(value){
  var sel = document.createElement("span");
  sel.innerHTML = value;

  $("body").append(sel);

  
  SelectText(sel);
}

createSelectedSpan("hello world");
setTimeout(function(){createSelectedSpan("hello world2")},5000); //called second time

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