0

コードがWebページのテキストエリアに入力されたときに構文の強調表示をエミュレートしようとしています。

少し JS スクリプトを作成しましたが、エラーがスローされます。「未定義のプロパティ 'color' を設定できません。」

これを行うために、入力されたコードを検索するためのいくつかの例の「流行語」の小さな配列を作成しました。次に、コード文字列を配列に分割し、2 つの一致をループします。私は分割方法や実際の検索方法に精通していません。画面上の色がリアルタイムで変化することが判明した一致を取得するにはどうすればよいですか?

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() は、テキストエリアの onFocus で実行されます。

どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

0

私はそのようなことをします：

var buzzwords = ['\\(\\)', 'function'];
previewDiv.innerHTML = textarea.value.replace(new RegExp(
    '(' + buzzwords.join('|') + ')', 'g'
), '<span style="color:blue">$1</span>');

2 つのバックスラッシュを使用して特殊文字をエスケープすることを忘れないでください: .(){}[]$.

于 2013-09-07T14:49:38.020 に答える
0

私はこれをもう一度やり直すことにしました。当然のことながら、私の以前の答えは打ちのめされました。ここにいくつかのコードがあります。私はそれを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"。テキストは awaiting にダンプされます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イベントをテキストエリアにバインドして毎回実行する必要がありますinit。詳細はこちら。

onfocusイベントを削除して、代わりにこれを追加する必要があります。

if (window.addEventListener) {
  document.getElementById('area').addEventListener('keyup', init, false);
} else {
  document.getElementById('area').attachEvent('keyup', init);
}

これにより、 を入力したときtextareaに、構文の色付けがdiv. Javascript の呼び出しがヘッダーではなく、HTML ページの下部にあることを確認してください。そうしないと、要素が認識されません。

于 2013-09-07T12:49:37.833 に答える