[英]Highlight a specific part in <textarea> using 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.