Question

我正在创建一个会有大量SQL的网站，然后rater然后将其显示为纯文本我会评估它看起来像是在SSMS上我想它会在div语句中自动执行此操作而我我不想为每一种颜色变化制作一个div或span，我认为这将是额外的工作。所以我想只使用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>

Answer 1

快速而肮脏的方式：D

.greenSql,  .greenSql *{
    color: #009900 !important;
}

Javascript函数覆盖prev函数

1 个答案: