如何在页面加载时选择一些文本？

Question

在下面的示例文本中，如何在文档加载时选择一些文本？

这是示例文本。如何选择一些文本“这是示例文本”...如选择鼠标但在页面加载时？这是示例文本。如何选择一些文字？这是示例文本。如何选择一些文字？这是示例文本。如何选择一些文字？这是示例文本。如何选择一些文字？

Answer 1

一些研究总是好的，当你自己解决它时，它会更有价值。

无论如何这是一个快速的混搭：

<强> HTML

 <span>test1 test1 test1 test1 test1 test1 test1</span></br>
 <span>test2 test2 test2 test2 test2 test2 test2</span></br>
 <span>test3 test3 <span class="target">[test3 test3]</span> test3 test3 test3</span></br>
 <span>test4 <span class="target">[test4 test4 test4 test4]</span> test4 test4</span></br>
 <span>test5 test5 test5 test5 test5 test5 test5</span></br>

<强> CSS

.marked{
  background-color:blue;
  font-weight: bold;
  color:white;
}

<强>脚本

我知道您要求页面加载但是为了将来使用，您可以在点击事件中执行此操作：

$(function() {

$(".target").on("click",function() {

    $(this).addClass("marked");
    var str = $(this).text();

    str = str.replace(/[[\]]/g, "");

    $(this).text(str);


});

})

可以阅读有关here

的更多信息

Fiddle

页面加载：

$(function() {

$(".target").each(function(){

    var str = $(this).text();
    str = str.replace(/[[\]]/g, "");

    $(this).addClass("marked").text(str);
})
})

onloadFiddle

Answer 2

可能有更好的解决方案，但我想出的是下面的那个。

代码段：

＆＃13;

＆＃13;

var span = document.getElementsByTagName("span");

function wrapSelection(el) {
  for (var i = 0; i < el.length; i++) {
    var text = el[i].textContent;
    var textToCopy = text.substring(text.lastIndexOf("[") + 1, text.lastIndexOf("]"));
    if (textToCopy) {
      console.log(textToCopy);
      var formattedText = text.replace(/\[|\]/g, '');
      var textToCopyHtml = '<span class="copy">' + textToCopy + '</span>';
      var result = formattedText.replace(textToCopy, textToCopyHtml);
      el[i].innerHTML = result;
    }
  }
}

wrapSelection(span);

＆＃13;

.copy {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
  background-color: gold;
  font-weight: bold;
}

＆＃13;

<span>[test1 test1 test1] test1</span>
<span>test4 test4 test2 test2</span>
<span>test3 [test3 test3] test3</span>
<span>test4 test4 [test4 test4]</span>

＆＃13;

＆＃13;

＆＃13;

备注：

• CSS属性user-select，目前需要供应商前缀， 允许您一键选择值all的所有内容。 您可以查看支持 here 。