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

我是JavaScript新手，我不明白他们在其他问题中写什么，比如这个标点符号($)。有没有人能告诉我最简单的方法或者至少告诉我应该学些什么?

我的第一个想法是生成一个元素，然后给它上色。之后，我将文本区域的值替换为元素的文本内容。下面是我的代码:

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

$算子与JQuery有关。要在代码中使用JQuery，你必须在<body>标签的末尾或head部分添加这一行:

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

为了使用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>

和你练习的答案:

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

相关内容

最新更新

热门标签：