web-dev-qa-db-ja.com

テキストエリアの特定の単語の色を変更する

私はSQLクエリビルダーを構築していて、ユーザーがSELECT、FROM、WHEREなどの単語を入力したときに、textarea内のWordのテキストの色を変更したいと考えています。

私はこれから少し検索しました（ https://jsfiddle.net/qcykvr8j/2/ ）残念ながらこれ以上は来ません。

コード例

HTML：

<textarea name="query_field_one" id="query_field_one" onkeyup="checkName(this)"></textarea>

JS：

    function checkName(el)
    {
    if (el.value == "SELECT" || 
    el.value == "FROM" || 
    el.value == "WHERE" || 
    el.value == "LIKE" || 
    el.value == "BETWEEN" || 
    el.value == "NOT LIKE" || 
    el.value == "FALSE" || 
    el.value == "NULL" || 
    el.value == "TRUE" || 
    el.value == "NOT IN")
    {
      el.style.color='orange'

    }
    else {
      el.style.color='#FFF'

    }
  }

JSFiddle：

https://jsfiddle.net/qcykvr8j/2/

しかし、この例では、さらに入力すると色が削除されます。

私が欲しいのはこれです：

Right way

KeyupとjQueryのContainsを組み合わせて何かを試しましたが、あまり効果はありませんでした。

キーアップ： https://api.jquery.com/keyup/

含む： https://api.jquery.com/contains-selector/

誰かが私にもっと多くの情報を見つけることができる例やサイトを手伝ってくれることを願っています.

よろしく、イェンス

javascriptjqueryhtmlonkeyup
13
user4579153

Textareaでカラーワードを変更することはできませんが、contenteditable属性を使用して要素のコンテンツテキスト（div、p、spanなど）を変更できます。この作業を行うには、javascriptプラグインを使用できますが、作成したい場合は、このコードを使用できます。この目的のために、テキスト内の任意のWordを取得する必要があります。次に、ターゲットのWordがSQLステートメントにあるかどうかを確認して、それを強調表示します。

$("#editor").on("keydown keyup", function(e){
    if (e.keyCode == 32){
        var text = $(this).text().replace(/[\s]+/g, " ").trim();
        var Word = text.split(" ");
        var newHTML = "";

        $.each(Word, function(index, value){
            switch(value.toUpperCase()){
                case "SELECT":
                case "FROM":
                case "WHERE":
                case "LIKE":
                case "BETWEEN":
                case "NOT LIKE":
                case "FALSE":
                case "NULL":
                case "FROM":
                case "TRUE":
                case "NOT IN":
                    newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                    break;
                default: 
                    newHTML += "<span class='other'>" + value + "&nbsp;</span>";
            }
        });
        $(this).html(newHTML);
        
        //// Set cursor postion to end of text
        var child = $(this).children();
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        $(this)[0].focus(); 
    }
});
#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}
  
.statement {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>
19
Mohammad

JS FIDDLE CODE

HTML-

<div id="board" class="original" contenteditable="true"></div>
<div id="dummy" class="original"></div>

CSS-

.original {
   position:absolute;width: 50%; margin: 0 auto; padding: 1em;background: #fff;height:100px;margin:2px;border:1px solid black;color:#fff;overflow:auto;
}

#dummy{
  color:black;
}
#board{
  z-index:11;background:transparent;color:transparent;caret-color: black;
}
.original span.highlighted {
    color:red;
}

JAVASCRIPT-

var highLightedWord = ["select","insert","update","from","where"];
var regexFromMyArray = new RegExp(highLightedWord.join("|"), 'ig');
$('#board').keyup(function(event){
 document.getElementById('dummy').innerHTML = $('#board').html().replace(regexFromMyArray,function(str){
 return '<span class="highlighted">'+str+'</span>'
 })
})
var target = $("#dummy");
  $("#board").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
          .prop("scrollLeft", this.scrollLeft);
  });
1
prtk712