Изменить характер или слово после ввода его JavaScript

Question

Допустим, я набираю слово "привет" в текстовой области.Как бы мне, после того, как я напечатал привет, выбрать то слово, которое я только что набрал, и изменить его.Например, после того, как я напечатал слово «привет», не нажимая пробел, распознаю слово «привет», и до и после него добавляем <b> и </b> вокруг слова.Таким образом, конечный результат будет <b>hello</b> Я знаю, что textarea не принимает HTML, но ради аргумента.Единственный способ сделать это - запускать функцию каждый раз, когда пользователь нажимает клавишу, и добавлять содержимое текстовой области в массив, разбивая его на пробелы.Но для этого требуются пробелы, а для перекрестной ссылки на массив потребуется время.Есть ли способ сделать это легко?

Answer 1

Вам определенно придется перехватывать каждое нажатие клавиши, если вы хотите, чтобы она выполняла замену при вводе, но вам не нужно проверять пробелы.Следующее сработало, когда я тестировал его в IE:

$(function() {
   $("#yourtextareaidhere").keyup(function(e) {
      var updatedText = this.value.replace(
                               /(^|[^>])(hello)($|[^<])/gi, "$1<b>$2</b>$3");
      if (updatedText != this.value)
         this.value = updatedText;
   });
});

По существу при каждом нажатии клавиши это заменяет строку, чтобы взять все экземпляры "hello", еще не окруженные ">" и "<" (включая где«Привет» в начале или в конце строки) и подставьте в <code>"<b>hello</b>".Если результат замены строки отличается от того, что было в поле (т. Е. Произошла некоторая подстановка), то новое значение записывается обратно в текстовое поле - я не просто записываю его обратно каждый раз, потому что при этом теряется курсорпозиция, которая раздражает пользователя, и мне лень придумывать лучший обходной путь, чем этот простой тест «если».(Я оправдываю это тем, что я предоставляю вам «стартовую позицию», а остальное оставляю вам.)

Этот подход учитывает тот факт, что пользователь, возможно, не набрал слово "Привет "за один раз, например, если они сделали опечатку и первоначально имели" Я говорю тебе привет ", затем вернулись и добавили" е ", тогда вы (предположительно) хотите заменить" Привет ", хотя это не такв конце.Также я делаю глобальную замену, так что если пользователь вставит в "привет привет привет", все они будут заменены.Решите сами, хотите ли вы замену без учета регистра.

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

Обратите внимание, что мои регулярные выражения немного устарели, поэтому я не удивлюсь, если естьлучший способ сделать то же самое, но я оставлю любые улучшения в качестве упражнения для читателя.

Answer 2

Вы можете использовать функцию JQuery.keyup для прослушивания нажатия клавиши пробела.

$("textarea").keyup(function(event)
{ 
    var c= String.fromCharCode(event.keyCode);
    var isWhiteSpace = c.match(/\s/);
});

Вы можете использовать объединение split и Функция также выполняет то, что вы описываете в последней части вашего вопроса.

Редактировать: Вот еще об этой идее: http://jsfiddle.net/ingenu8/ukkwM/

<div class="formatted"></div>
<textarea class="observed"></textarea>

и JS:

$(document).ready(function() {
    function hasHtml(str)
    {
        return str.match(/<b>.*?<\/b>/);
    }

    function formatStr(str)
    {
        var bits = str.split(/\s+/);
        var last = bits.pop();
        if(!last.match(/^\s*$/))
        {
            if(!hasHtml(last))
            {
                bits.push('<b>'+last+'</b>');
            }
        }
        return bits.join(' ');
    }

    setInterval(function() {
        var str = formatStr($('.observed').val());
        $('.formatted').html(str);
    }, 1000);
});