javascript - 浏览器如何突出显示文本而不在单词周围添加任何标签

Question

任何人都可以帮助我了解浏览器如何突出显示文本(当我们使用 ctrl+f 并搜索任何单词时)，而无需 dom 操作或在单词周围添加任何标签。我必须在我的应用程序上实现搜索功能，其中我有在线图书创建器及其预览。用户可以使用搜索按钮找到任何单词，我将显示找到的单词的列表。当用户单击列表中的任何项目时，我必须将用户发送到单词的特定部分。之后，我将显示带有突出显示背景的单词(1 秒后隐藏)。但是，当我添加带有突出显示类的 span 标签并将其删除时，如果在行尾找到该单词，则在某些情况下书籍中的行会移动。

<span class="highlight">The word founded by search</span>

然后我看到浏览器的搜索功能，我可以看到浏览器没有添加任何标签来突出显示文本。可能是因为它是用 Canvas 做的。任何人都可以帮助我解决这个问题吗？我可以在不添加任何标签或类的情况下突出显示文本吗？浏览器到底是如何做到这一点的？

Answer 1

创建用于测试目的的文本:

function myFunction() { //This function is for test purposes
document.open();
var data = document.write("hih This part is for test purposes   uihuiuuh hhhiuh hhihi Hello World gukhjggkhgkghkghkgkkg hvbhjj bjhbjhhjhbgjhb jkjkjhjkh hkjhkjh jhjkhkj jhjkhkj jhkj kjhjkhk hjkhkjhjkh jjjjkjhiooigsesres lllljlk kjlj  hgfgfhgfghfgfhgfgfhgfytfytftfytfytffftfftyftftyfdrdres hihhhggyg gvghggfhgf jjgygjyg hjgjhgjhg hhjgg hbhjb");
document.close();
$("#dvContent").html(data);
}

<p>Click the button to open an output stream, add some text, and close the output stream.</p>

<button onclick="myFunction()">Try it</button>

<div id = "dvContent">
</div>

如果您想打开外部文档

J脚本:

    $(document).ready(function() {
        $("#lesen").click(function() {
            $.ajax({
                url : "helloworld.txt",
                dataType: "text",
                success : function (data) {
                    $("#dvContent").html(data);
                }
            });
        });

}); 

html:

<div id = "dvContent" >
</div>

从 Get a list of all currently pressed keys in Javascript 创建按键触发器示例

var keys = [];
document.body.innerHTML = "Keys currently pressed: "
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = e.keyCode;
        var keysArray = getNumberArray(keys);
        document.body.innerHTML = "Keys currently pressed:" + keysArray;
        if(keysArray.toString() == "17,65"){
            document.body.innerHTML += " Select all!"
        }
    },
false);

window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
        document.body.innerHTML = "Keys currently pressed: " + getNumberArray(keys);
    },
false);

function getNumberArray(arr){
    var newArr = new Array();
    for(var i = 0; i < arr.length; i++){
        if(typeof arr[i] == "number"){
            newArr[newArr.length] = arr[i];
        }
    }
    return newArr;
}

操纵触发器使文本框出现，以输入我们要查找的文本或单词。

var keys = [];
 
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = e.keyCode;
        var keysArray =keysArray = getNumberArray(keys);
        document.body.innerHTML = "Keys currently pressed:" + keysArray;
        if(keysArray.toString() == "17,65"){
           var str_comp = prompt("Text to find", "");
           keys = [];
           document.body.innerHTML = "";
           document.body.innerHTML = str_comp;
        }
    },
false);

window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
        document.body.innerHTML = getNumberArray(keys);
    },
false);

function getNumberArray(arr){
    var newArr = new Array();
    for(var i = 0; i < arr.length; i++){
        if(typeof arr[i] == "number"){
            newArr[newArr.length] = arr[i];
        }
    }
    return newArr;
}

一个简单的查找文本脚本 http://www.jquerybyexample.net/2012/03/how-to-underline-particular-word-using.html由@T.Shah提供

$(document).ready(function(){
  var dvWords = $("#dvContent").html().split(' ');    
  var dvHTML = ''
  for (i = 0; i < dvWords.length; i++) 
  {   
     if (dvWords[i].toLowerCase() == 'jquery') 
     {
        dvHTML += ' ' + '<span>' + dvWords[i] + '</span>';
     }
     else
     {
         dvHTML += ' ' + dvWords[i];           
     }
   }    
   $("#dvContent").html(dvHTML);
});

body
{
    font-family:Arial;
    font-size : 10pt;
}
#dvContent span
{
   text-decoration: underline;
   font-weight : bold;
   color : Blue;    
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. jQuery In nulla est, congue quis sagittis vel, ullamcorper euismod mi. Duis gravida, nibh id placerat sagittis, quam tellus vestibulum nisl, a feugiat augue ipsum sit amet urna. Sed semper urna non odio bibendum blandit. Etiam eu jQuery orci ut arcu commodo dignissim. Curabitur sit amet massa velit. Fusce in felis ac ipsum ultrices elementum. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur jQuery adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Suspendisse turpis nulla, mattis et scelerisque vitae, eleifend dictum nibh. Suspendisse at felis velit, sed sollicitudin enim. Aliquam erat volutpat. jQuery Quisque sed purus ac enim volutpat iaculis eget et risus. Donec consequat odio vel sem dignissim eu venenatis nisl vehicula. Suspendisse potenti.

Maecenas et arcu et quam dapibus lobortis. Curabitur tincidunt tincidunt dictum. jQuery Sed porta cursus jQuery sodales. Cras sodales, ipsum non molestie malesuada, erat lacus faucibus orci, id venenatis leo nibh quis purus. Proin eu sem vitae felis pellentesque suscipit vitae id erat. In eros mi, egestas non cursus ac, bibendum ac nisl. Cras convallis elit jQuery in felis congue ut consectetur ipsum egestas.

Pellentesque jQuery felis elit, posuere ut aliquet id, fermentum et purus. Quisque ac nunc vitae sapien eleifend sollicitudin. Proin nisl est, congue et adipiscing nec, rutrum non eros. Sed ultrices ullamcorper justo, in lobortis quam mollis ac. Proin ac lacinia eros. Integer jQuery suscipit consectetur scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sem sapien, sollicitudin sed sodales non, cursus nec ipsum. Aenean pretium eros non felis accumsan vitae tristique quam dapibus. Donec eget quam sed sem varius rutrum eget nec mi. jQuery Cras ut ipsum nisl.
</div>

最后，让我们把它们放在一起

var keys = [];
var data = myFunction();
$("#dvContent").html(data); 
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = e.keyCode;
        var keysArray =keysArray = getNumberArray(keys);
        if(keysArray.toString() == "65,68"){
           var str_comp = prompt("Text to find", "");
           get_str_eql(str_comp, data);
           keys = []; 
        }
    },
false);

window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
        getNumberArray(keys);
    },
false);

function getNumberArray(arr){
    var newArr = new Array();
    for(var i = 0; i < arr.length; i++){
        if(typeof arr[i] == "number"){
            newArr[newArr.length] = arr[i];
        }
    }
    return newArr;
}

function myFunction() { //This function is for test purposes
var data = "hih This part is for test purposes uihuiuuh hhhiuh hhihi Hello World gukhjggkhgkghkghkgkkg hvbhjj bjhbjhhjhbgjhb ola jkjkjhjkh hkjhkjh jhjkhkj jhjkhkj jhkj kjhjkhk hjkhkjhjkh jjjjkjhiooigsesres ola lllljlk kjlj  hgfgfhgfghfgfhgfgfhgfytfytftfytfytffftfftyftftyfdrdres hihhhggyg gvghggfhgf jjgygjyg hjgjhgjhg hhjgg hbhjb ola";
return data;
}

function get_str_eql(string_val, data_val){ 

   
  var dvWords = data_val.split(" ");
  
  var dvHTML = "";
  for (i = 0; i < dvWords.length; i++) 
  {  
     
     if (dvWords[i] == string_val) 
     {
        dvHTML += " " + "<span>" + dvWords[i] + "</span>";
     }
     else
     {
         dvHTML += " " + dvWords[i];           
     }
   }    
   $("#dvContent").html(dvHTML);
}

body
{
    font-family:Arial;
    font-size : 10pt;
}
#dvContent span
{
   text-decoration: underline;
   font-weight : bold;
   color : Red;    
    
}

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


<div id = "dvContent">
</div> <br> 
</br>
<p>Click in the keys 'a' and 'd' to make the search.</p>

它正在工作。现在只需再做一点工作，您就拥有了一个单词搜索系统。