javascript - JQuery/JavaScript - 入力またはテキストエリアからテキストの一部を強調表示する

Question

重複の可能性：
JavascriptまたはJQueryを使用してHTMLで入力テキストフィールドの一部を強調表示する方法

またはでテキストを強調表示する方法を知っている人はいますinput[type=text]かtextarea? 出来ますか？

Answer 1

divを後ろに配置し、textareaテキストに従ってスタイルを設定する必要があります。
注:

• textarea background-color色を表示するには、透明に設定しますhighlighter。
• 適切な場所に配置するにhighlighterは、同じスタイルとテキスト コンテンツである必要があります。textareaspan
• highlighterテキストを背景と同じ色に設定しない<b>と、span.

html :

<div class="highlighter">some text <span>highlighted</span> some text</div>
<textarea>some text highlighted some text</textarea>

css :

.highlighter, textarea {
    width: 400px;
    height: 300px;
    font-size: 10pt;
    font-family: 'verdana';
}

.highlighter {
    position: absolute;
    padding: 1px;
    margin-left: 1px;
    color: white;
}

.highlighter span {
    background: red;
    color: red;
}

textarea {
    position: relative;
    background-color: transparent;
}

デモ

Answer 2

このコード スニペットは、次の方法を示しています。

window.onload = function() {
    var message = document.getElementById('message');
    // Select a portion of text
    createSelection(message, 0, 5);

    // get the selected portion of text
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
    alert(selectedText);
};

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}