Как я могу явно отображать разрывы строк как "\ n" внутри тега HTML <textarea>? - PullRequest
Новая
       95

Как я могу явно отображать разрывы строк как "\ n" внутри тега HTML <textarea>?

0 голосов
/ 26 мая 2020

Я пишу простое веб-приложение, которое превращает простой текст в код python.

Пример: это мой простой текст ----> print ("это мой простой текст")

простой текст сохраняется в обычном текстовом поле. Выходной текст хранится в отключенном текстовом поле.

Проблема: HTML автоматически анализирует \ n, и я не нашел хорошего способа сохранить \ n внутри выходного текстового поля. Это проблема, поскольку копирование содержимого внутри текстового поля вывода не работает должным образом.

Вот что я пытаюсь сделать:

Вход: Foo Bar

Выход : print ("Foo \ nBar")

Исходный код: 

 function set(el, text) {
            while (el.firstChild) el.removeChild(el.firstChild);
            el.appendChild(document.createTextNode(text))
        }

        /* setupUpdater will be called once, on page load.
         */

        function setupUpdater() {
            var input = document.getElementsByTagName('textarea')[0],
                output = document.getElementsByTagName('textarea')[1],
                timeout = null;

            function handleChange() {
                //string.replace(/[\n]/g, '\n')
                var inputText = input.value;
                set(output, "print(\"" + inputText + "\")");
                ("\n");
            }

            /* eventHandler is called on keyboard and mouse events.
               If there is a pending timeout, it cancels it.
               It sets a timeout to call handleChange in 0ms. */
            function eventHandler() {
                if (timeout) clearTimeout(timeout);
                timeout = setTimeout(handleChange, 0);
            }
            input.onkeydown = input.onkeyup = input.onclick = eventHandler;
        }
        setupUpdater();
        document.getElementsByTagName('textarea')[0].focus();
        <div class="grid-container">
            <textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here"></textarea>
            <textarea name="plainText" id="plainText" cols="40" rows="40" readonly>print("")</textarea>
        </div>

Я буду счастлив прояснить все, что осталось мной необъяснимым, но я надеюсь, что вопрос и то, чего я пытаюсь достичь, ясны.

Ответы [ 3 ]

0 голосов
/ 26 мая 2020

Вы можете использовать метод замены строки с регулярным выражением для соответствия всем \ n, например: 

const output = inputText.replace(/\n/g, '\\n')
0 голосов
/ 26 мая 2020

Ваш код в порядке. просто замените 

var inputText = input.value;
  with 
var inputText = input.value.split(' ').join('\\n');
0 голосов
/ 26 мая 2020

.replace не изменяет существующую строку - вам нужно каким-то образом использовать полученное выражение, например, объединить его с print экраном, который вы создаете.

Чтобы заменить символы новой строки на \n , найдите символы новой строки /\n/g и замените \\n (буквальный backsla sh, за которым следует литерал n).

Вы также должны заменить " s на \": 

set(output, `print("${input.value.replace(/\n/g, '\\n').replace(/"/g, '\\"')}")`);


function set(el, text) {
  while (el.firstChild) el.removeChild(el.firstChild);
  el.appendChild(document.createTextNode(text))
}

/* setupUpdater will be called once, on page load.
 */

function setupUpdater() {
  var input = document.getElementsByTagName('textarea')[0],
    output = document.getElementsByTagName('textarea')[1],
    timeout = null;

  function handleChange() {
    set(output, `print("${input.value.replace(/\n/g, '\\n').replace(/"/g, '\\"')}")`);
  }

  /* eventHandler is called on keyboard and mouse events.
     If there is a pending timeout, it cancels it.
     It sets a timeout to call handleChange in 0ms. */
  function eventHandler() {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(handleChange, 0);
  }
  input.onkeydown = input.onkeyup = input.onclick = eventHandler;
}
setupUpdater();
document.getElementsByTagName('textarea')[0].focus();
<div class="grid-container">
  <textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here">foo"bar</textarea>
  <textarea name="plainText" id="plainText" cols="40" rows="40" readonly>print("")</textarea>
</div>
...