Как выделить часть текста в textarea

есть ли способ выделить часть текста в textarea.
Например: скажем, текст "Привет @twitter @twitpic" и теперь я хотел бы выделить @twitter и @twitpic, а не Привет. Это должно произойти на лету.
Я не хочу использовать окне iframe

спасибо заранее

7
css html javascript regex textarea

3 ответов

не оборачивая тег вокруг конкретных слов, вы не можете выделить его (или, как я уже сказал, по крайней мере, я понятия не имею, как). но если нет проблем с упаковкой тегов, вы должны использовать regEx.

для слов, начинающихся с @ :

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

и для слов, начинающихся с # :

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

Регистрация эта скрипка

EDIT: вы можете заменить 

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

С

var status = $('#phrase').text();
5

использовать 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>
4

Я пришел сюда в поисках ответа, где я мог бы выделить определенные слова в textarea. Не нашел ответа в этой теме. Итак, добавив, как я это сделал:

для этого примера вы сделаете что-то вроде:

  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