我正在创建一个网站，上面有很多 SQL，然后评估者将其显示为纯文本不想为每次颜色更改都创建一个 div 或一个跨度，我认为这会分配额外的工作。 所以我想只使用 HTML、CSS 和 java 脚本来做。 这是我到目前为止所做的，这是一项正在进行的工作
当执行第一个函数时，我希望该行全是绿色，就好像我在注释掉某些东西一样，它确实如此。 但是当第二个函数执行时，它会跨越跨度并将一些关键字更改为蓝色。有什么办法可以防止这种情况发生吗？
https://jsfiddle.net/Fiore3636/9cfcqvLj/5/
<!DOCTYPE html>
<html><head>
<style type='text/css'>
.greenSql{
color: #009900 !important;
}
.SQL {
color: #0099CC;
}
.BlueSql {
color: #0000FF ;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript'>
function SetCodeText() {
var myList = document.getElementsByClassName("SQL")
var i;
greenText(myList)
BlueText(myList)
};
function BlueText(myList) {
var myList = document.getElementsByClassName("SQL")
for (i = 0; i < myList.length; i++) {
alert(myList[i].innerHTML)
var BlueSql = ["Add ","Precision ","Exit ","Primary ","Alter ","External ","Print ","Fetch ","Proc ","File ","Procedure ","As ","Fillfactor ","Public ",
"Asc ","For ","Raiserror ","Authorization ","Read ","Backup ","Freetext ","Readtext ","Begin ","Freetexttable ","Rreonfigure ","From ","References ","Break ","Full ",
"Replication ","Browse ","Function ","Restore ","Bulk ","Goto ","Restrict ","By ","Grant ","Return ","Cascade ","Group ","Revert ","Case ","Having ","Revoke ","Check ","Holdlock ",
"Checkpoint ","Idenity ","Rollback ","Close ","Identity_insert ","Rowcount ","Clustered ","Identitycol ","Rrowuidcol "," If ","Rule ","Save ","Coulmn ","Index ","Schema ",
"CommtT ","Securityaudit ","Compute ","Insert ","Select ","Consoraint ","Intersect ","Into ","Set ","Containstable ","Setuser ","Continue ","Shutdown ","Key ","Create ",
"Kill ","Statistics ","Current ","Table ","Current_date ","Lineno ","Tablesample ","Load ","Textsize ","Merge ","Then ","To ","Cursor ","Nocheck ",
"Top ","Database ","Nonclustered ","Tran ","Dbcc ","Transaction ","Deallocate ","Trigger ","Declare ","Truncate ","Default ","Of ","Delete ","Off ","Union ","Deny ","Offsets ",
"Unique ","Desc ","On ","Disk ","Open ","Distinct ","Opendatasource ","Updatetext ","Distributed ","Openquery ","Use ","Double ","Openrowset ","User ","Drop ","Openxml ",
"Values ","Dump ","Option ","Varying ","Else ","View ","End ","Order ","Waitfor ","Errlvl ","When ","Escape ","Over ","Where ","Except ","Percent ","While ","Exec ","With ","Execute ","Plan ","Writetext ","Full"
];
for (txt of BlueSql)
{
myList[i].innerHTML = myList[i].innerHTML.split(txt).join('<span class="BlueSql">' + txt + '</span>');
myList[i].innerHTML = myList[i].innerHTML.split(txt.toLowerCase()).join('<span class="BlueSql">' + txt.toLowerCase() + '</span>');
myList[i].innerHTML = myList[i].innerHTML.split(txt.toUpperCase()).join('<span class="BlueSql">' + txt.toUpperCase() + '</span>');
}
}
}
function greenText(myList) {
var greenSql = ["--"];
for (i = 0; i < myList.length; i++) {
for (txt of greenSql)
{
myList[i].innerHTML = myList[i].innerHTML.split(txt).join('<span class="greenSql">' + txt);
}
}
}
</script>
</head>
<body onload="SetCodeText()">
<div class="SQL">
SELECT column_name(s)<br /> Add
FROM table_name<br />
WHERE column_name BETWEEN value1 AND value2;<br />
Collate
<br />
SELECT column_name(s)<br />
FROM table1<br />
RIGHT JOIN table2<br />
ON table1.column_name=table2.column_name;<br />
--select from 'saleslog' where 'Status' = 'saleslog'
<br />
</div>
<p class="SQL">
SELECT column_name(s)
FROM table_name
WHERE column_name BETWEEN value1 AND value2;
Collate
SELECT column_name(s)
FROM table1
RIGHT JOIN table2
ON table1.column_name=table2.column_name
select from 'saleslog' where 'Status' =
'saleslog'
select from 'saleslog' where 'Status' =
'saleslog'
select [column_name]
FROM table_name
#include
int main() {
printf("Hello, world!\n");
}
</p>
SELECT column_name(s)FROM table_name WHERE column_name BETWEEN value1 AND value2;
Collate SELECT column_name FROM table1 RIGHT JOIN table2 ON table1.column_name =
table2.column_name select from 'saleslog' where 'Status' = 'saleslog'
</body></html>
最佳答案
快速而肮脏的方式 :D
.greenSql, .greenSql *{
color: #009900 !important;
}
关于Javascript 函数重写 prev 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31458990/