简体   繁体   English

突出显示其中的特定部分 <textarea> 使用JS

[英]Highlight a specific part in <textarea> using JS

I am new to JavaScript and I cannot understand what they write in other questions, like this punctuation($). 我是JavaScript的新手,我无法理解它们在其他问题(例如标点符号($))中的内容。 Can anyone give me the easiest way to do this or at least show me what should I learn to do this? 谁能给我最简单的方法,或者至少告诉我应该学习什么?

My first idea was to generate an element and then color it. 我的第一个想法是生成一个元素,然后为其着色。 After that, I replaced the value of the text area with the text content of the element. 之后,我用元素的文本内容替换了文本区域的值。

Here is my code: 这是我的代码:

<script type="text/javascript">
    function active1() {
        var w = document.getElementById("infor");
        var z = document.getElementById("infor").value;
        var h = z.length;
        var u = document.getElementById("search").value;
        var q = u.length;
        var answer = [];
        var string ="";
        for(var i = 0;i<h;i++)
        {
            for(var t=0;t < q; t++)
            {
                if(z[i+t] === u[t])
                {
                    answer.push(z[t+i]);
                    if(answer.length === q)
                    {
                        var b = i + t; 
                        for(var v in answer)
                        {
                            string += answer[v];
                        }    
                        var create = document.createElement("p");
                        create.textContent = string;
                        create.id = "get";
                        document.getElementById("bye").appendChild(create);
                        var get = document.getElementById("get");
                        var a = z.replace(z.substr(i,b),get.innerHTML);
                        w.style.color = "red";
                        var y = document.createElement("p");
                        y.innerHTML = create.innerHTML;
                        document.getElementById("superman").appendChild(y);
                        w.value = a;
                        break;  
                    }
                }
                else
                {
                    answer = [];
                    break;
                }
            }
        }
    }
</script>
<input type="search" id="search" placeholder="type here">
<input type = "button" value="search" onclick="active1()"/>
<textarea rows="50" cols = "100" id="infor"></textarea>
<div id="bye"></div>
<div id="superman"><div>

$ operator is related to JQuery. $运算符与JQuery相关。 To use JQuery in your code you must add this line at the end of <body> tag or in head section: 要在代码中使用JQuery,必须在<body>标记的末尾或head部分中添加以下行:

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

In order to use JQuery here is an example : 为了使用JQuery,这里是一个示例:

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> 

And the answer to your exercise : 而锻炼的答案:

 <html> <head> <title>hi</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#clickme").click(function() { $("body").append('<p id="gen" style="color:red">'+$("#getme").val()+'</p>'); }); }); </script> </head> <body> <input id="getme" type="text" placeholder="Content here..." /> <button id="clickme">Click!</button> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM