javascript - 添加后选择部分文本

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，其值为 span 元素。 sel 的 innerHTML 设置为参数 value 的值。然后，sel 被 body 收养为 child 。最后 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>