浏览器如何突出显示文本而不添加任何标签

Question

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

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

然后我看到了浏览器的搜索功能，我可以看到浏览器没有添加任何标签来突出显示文字。可能是因为它的画布。任何人都可以帮我解决这个问题，我可以突出显示文本而不添加任何标签或类或浏览器如何正确地执行此操作。

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>

如果要打开外部文档

的Jscript：

    $(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>

它正在运作。现在它只是一点点工作，你有一个单词搜索系统。