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作为孩子。最后选择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>

Answer 2

您可以通过jQuery插入元素，然后选择刚刚插入的元素。这样你总是瞄准你现在插入的任何东西。

var sel = $('<span>').html('lorem ipsum');
$('body').html('<p>Hello world <span class="insertion-point"></span> great day!</p>');
$('body').find('.insertion-point').after(sel);
var toSelect = sel.get(0);

if (document.body.createTextRange) {
	range = document.body.createTextRange();
    range.moveToElementText(toSelect);
    range.select();
} else if (window.getSelection) {
	selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(toSelect);
    selection.removeAllRanges();
    selection.addRange(range);
}

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

Answer 3

您正在使用的“SelectText”功能很好。我认为解决方案可以是这样的：

$(document).ready(function(){
    $sel = 'lorem ipsum';
    $('#feedback').html('<p>Hello world <span id="selection">'+ $sel +'</span> great day!</p>');
    SelectText('selection');  
});

Answer 4

您可以将$ sel包装在任何自定义标记中，并不重要，例如x。

this.innerHTML = '<p>Hello world <x>' + $sel +'</x> great day!');

然后只是突出显示它。由于此仅包含 p 标记，因此您可以直接从此通过 p 标记将其引用到 x 标记，其中包含 $ sel 值。您不必担心网页上的其他 x 标记，因为您开始从此向下查找。您总会找到1个 p 标记，并且只在 x 标记内。

var selection = window.getSelection();        
var range = document.createRange();
var p = this.children[0]; // 'children' ignores Text nodes unlike 'childNodes'
var x = p.children[0];
range.selectNodeContents(x);
selection.removeAllRanges();
selection.addRange(range);

Tadaa。

Answer 5

您的功能很好，所以选择它的最简单方法是在Ajax完成后调用它。只需要监听要触发的事件并调用该函数。

这应该这样做：

var xhr = new XMLHttpRequest();
// do stuff

// listen to the loading to be finished
xhr.onreadystatechange = function()
    {
        try
        {
            if (xhr.readyState == 4 && xhr.status == 200) 
            {           
             /* here your loading is finished, call the function
                on the id of the element which received the text */
             SelectText('yourElement');
            }
        }
        catch(e)
        {
        alert(e.message);
        }
    };

因此，在加载完成后，即在页面上输出文本时，文本将突出显示。瞧！

Answer 6

您可以在span标记中插入新元素：

使用Jquery：

通过这种方式，您可以选择任何您想要的样式。

Answer 7

最好的方法是将CSS用于此目的。

var text = "Bla Bla";
$('body').append("<p>Text Before, <span class='highlight'>" + text + "</span>, Text After</p>");

.highlight {
  background-color: yellow;
  }

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

添加完文本后选择部分文字

7 个答案: