[英]Emulating syntax highlighting with Javascript
我正在嘗試一些東西,確實只是出於一點樂趣,因此我試圖在將代碼輸入到網頁上的文本區域時模擬語法高亮顯示。
我已經寫了一些JS腳本,但是它引發了錯誤。 “無法設置未定義的屬性'顏色'。”
為此,我創建了一個由幾個示例“流行詞”組成的小數組,以搜索輸入的代碼。 然后,我將代碼字符串拆分為一個數組,並循環查找兩者之間的匹配項。 我對split方法或搜索方法並不熟悉。 如何獲得在屏幕上實時更改顏色的任何匹配項?
function init() {
window.setInterval(function() {
var code = document.getElementById("texty").value;
var buzzword = ["function","()","{","}","[","]",".getElementById",".getElementsByClassName",".style","$"];
for(i=0; i < buzzword.length; i++)
{
var testers = code.split(" ");
for(i =0; i < testers.length; i++)
{
if(buzzword[i] == testers[i])
{
code.search(testers[i]);
code.match(testers[i]).style.color = 'blue';
}
}
}
}, 10000);
}
函數init()在textarea的焦點上執行。
任何幫助,將不勝感激,謝謝!
我決定再做一次。 很安靜,我以前的回答被擊落了。 這是一些代碼。 我無法對其進行jsfiddle,但我已經對其進行了測試,並且效果很好:
一些CSS:
<style> .blue { color: blue; } </style>
一些用於測試的HTML:
<div id="div"></div>
<textarea id="area" onfocus="init()">
function writeTo() {
var id = document.getElementById('id');
var class = document.getElementsByClass('class');
id.style.color = 'blue';
var $id = $('#id');
var array = [];
var obj = {};
}
</textarea>
一些Javascript。 這使用正則表達式而不是數組。 它在流行語上進行查找/替換,並用class="blue"
將其包裝在一個范圍內。 然后將文本轉儲到等待的div
:
function init() {
var area = document.getElementById('area');
var div = document.getElementById('div');
var buzzword = /function|.getElementById|.getElementsByClassName|.style|\{|\}|\(|\)|\$|\[|\]/g;
var text = area.value;
var replacedText = text.replace(buzzword, function (selection) {
return '<span class="blue">' + selection + '</span>';
});
div.innerHTML = replacedText;
}
如果要實時更新(或每次用戶鍵入內容),則應將keyup
事件綁定到textarea以便每次都運行init
。 還有更多的是在這里 。
您應該擺脫onfocus
事件,並添加以下內容:
if (window.addEventListener) {
document.getElementById('area').addEventListener('keyup', init, false);
} else {
document.getElementById('area').attachEvent('keyup', init);
}
這將確保在鍵入textarea
,在div
的語法顏色應該是正確的。 確保對Javascript的調用位於HTML頁面的底部,而不是標頭中,否則它將無法識別該元素。
我會做這樣的事情:
var buzzwords = ['\\(\\)', 'function'];
previewDiv.innerHTML = textarea.value.replace(new RegExp(
'(' + buzzwords.join('|') + ')', 'g'
), '<span style="color:blue">$1</span>');
不要忘記使用兩個反斜杠來轉義特殊字符: .(){}[]$
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.