web-dev-qa-db-ja.com

テキストエリアのテキストの一部を強調表示する方法

テキスト領域のテキストの一部を強調表示する方法はありますか？

たとえば、テキストはHi @Twitter @twitpic次に、@ Twitterおよび@ twitpicのみを強調し、Hiは強調しません。それは可能ですか？

これはその場で行われる必要があります。

PS：使いたくないiFrame

前もって感謝します

javascripthtmlcsstextarea
17
Basavaraj Metri

特定の単語をタグで囲まないと、強調表示できません（または、私が言ったように、少なくとも方法がわかりません）。タグの折り返しに問題がない場合は、regExを使用する必要があります。

@で始まる単語の場合：

replace(/@([^ ]+)/g, '<span class="atsign">@$1</span>');

＃で始まる単語の場合：

status.replace(/#([^ ]+)/g, '<span class="hashtag">#$1</span>');

チェック このフィドル

EDIT：置き換えることができます

var status = 'I tweeted something #one #two @three @four';

と

var status = $('#phrase').text();
7
Payam Shakibafar

そのテキストにsetSelectionRangeメソッドを使用します

サンプルコード：

<body>
    <section>
        <textarea id="textarea"></textarea>
        <button id="hgh">Hightlight @twiiter</button>
    </section>

    <script>

        window.onload = function () {

            var textarea = document.getElementById("textarea");
            var checkError = document.getElementById("hgh");

            checkError.addEventListener("click", function () {

                var index = textarea.innerText.indexOf("@Twitter");
                if( index >= 0)
                    textarea.setSelectionRange(index, index + 8);
            });
        }

    </script>
</body>
7
Abhishek Kargawal

ここに来て、テキストエリアの特定の単語をハイライトできる答えを探しました。このスレッドで答えが見つかりませんでした。だから、私がそれをやった方法を追加します：

この例では、次のようにします。

  1. ここからスクリプトをダウンロードして含めます： http://garysieling.github.io/jquery-highlighttextarea/index.html

  2. そしてこれを使う：

    <script>
$('textarea').highlightTextarea({
 words: ['@Twitter', '@twitpic'],
 id: 'demoCustom',
 caseSensitive: false
 // or a regular expression like -> words: ['@([^ ]+)']
});
</script>

<style>
 #demoCustom mark {
  padding:0 3px;
  margin:-1px -4px;
  border-radius:0.5em;
  border:1px solid pink;
 }
</style>

その他の例： http://garysieling.github.io/jquery-highlighttextarea/examples.html

1
Sahith Vibudhi