Обработка длинной строки в javascript

Question

У меня есть страница, где пользователь может редактировать некоторые значения (имя, описание и т. Д.), Который отлично работает, за исключением того, что в качестве описания добавлена ​​длинная строка.

Когда пользователь меняет значение поля ввода, вызывается функция javascript для проверки того, отличаются ли значения от начального (когда сайт сначала загружается с PHP, начальные значения хранятся как переменные). Это выглядит следующим образом:

<script> 
    //checks if a field has changed value, if yes, change class 
    function check(div, text){ 
     if(div.val()===text){ 
      div.parent().removeClass("has-warning"); 
      return 0; 
     } else{ 
      div.parent().addClass("has-warning"); 
      return 1; 
     } 
    } 
</script> 
*here goes the html stuff* 
<script> 
    //whenever the form content changes 
    $('#horse1').bind('input', function() { 
     //the form div 
     var horseDiv = $('#horse1'); 
     //count all the fields with changed value 
     var error = check(horseDiv.find($('#name')), 'Rinaldo') 
        +check(horseDiv.find($('#race')),'-') 
        +check(horseDiv.find($('#date')),'1988-01-01') 
        +check(horseDiv.find($('#use')), 'Showpferd') 
        +check(horseDiv.find($('#shortDesc')), 'short Description') 
        +check(horseDiv.find($('#description')),'This can be a long text over multiple lines'); 

        //if there is at least one field with a 
        //changed value, display an error message 
     var errorDiv = horseDiv.find($('#notSaved')); 
     if(error==0){ 
      errorDiv.hide(); 
     } else{ 
      errorDiv.show(); 
     } 
    }); 
</script> 

Так, во-первых, если кто-то имеет представление о том, как сделать это поведение более элегантный, я открыт для предложений.

Но проблема в том, что этот скрипт полностью перестает работать, если текст (описание) длиннее одной строки. Я не уверен, почему и как это решить, поэтому любая помощь будет очень признательна.

*** UPDATE: сравнение нескольких текстов строк в JavaScript

В случае, если кто имеет такую ​​же проблему, вот решение, которое работает для меня:

var textNew = text.replace(/%0D/g, ''); 
var divNew = encodeURIComponent(div.val()).replace(/!/g, '%21') 
              .replace(/'/g, '%27') 
              .replace(/\(/g, '%28') 
              .replace(/\)/g, '%29') 
              .replace(/\*/g, '%2A'); 

Переменная «текст» является rawlurlencode() Строка из php-Script и div.val() - это открытый текст, читаемый из текстового поля. С приведенным выше кодом textNew === divNew возвращает true, даже если они содержат запятые, umlaute, новые строки и другие неприятные вещи.

Answer 1

Попробуйте передать строку описания в json_encode, чтобы правильно ее избежать.

Answer 2

Конечно, он перестает работать.

На стороне PHP вам нужно правильно соединить строки, если в них есть строки.

preg_replace("/\r|\n/", "", $yourString); 

Answer 3

Juliette, я думаю, было бы лучше использовать событие change вместо input, пока вы не должны немедленно проверить, если текст будет изменен. Браузер сделает для вас всю рутину.
Также вам нужно знать, почему ваш скрипт останавливается, если он еще не знает). Вы можете посмотреть вкладку «Консоль» в панели инструментов dev в браузере.
Если на самом деле вы должны видеть изменения сразу после нажатия пользователем клавиши, чем я рекомендую вам использовать строковый метод localeCompare
Вот ответ о сравнении Optimum way to compare strings in Javascript?
Надеюсь, что помог вам!

Answer 4

Я предполагаю, что #description является <textarea>, поскольку вы упоминаете, что он может быть многострочным.

Сценарий, который вы опубликовали, должен иметь символы \n вместо фактической строки в сценарии. Вам нужно будет сделать замену в PHP, чтобы достичь этого, но не тот, который был опубликован Lemmy, поскольку он просто удаляет новую строку. Вы также можете просто кодировать JSON, как обсуждалось ранее.

Кроме того, будьте уверены, что в Windows браузеры будут обрабатывать символы новой строки как \r\n, а не только \n. Вам также потребуется выполнить замену в JS, чтобы удалить любые символы \r перед сравнением, чтобы справиться с этим.

Кроме того, вы можете сделать .find("#selector") вместо .find($("#selector")).