Ввод пуст после того, как я обновлю текст в зеркалировании - PullRequest
Новая
       1

Ввод пуст после того, как я обновлю текст в зеркалировании

0 голосов
/ 06 апреля 2019

Я пытаюсь создать очень простой редактор уценки. Я использую текстовое поле слева для ввода данных, а справа у меня есть точка входа div, в которой я храню все, что я печатаю, так как я набираю его с помощью слушателя «keyup». Я получил текст, чтобы применить класс, чтобы сделать его жирным, когда код отформатирован с * в начале и конце слова, но после обновления DOM этим следующее слово, которое я пытаюсь ввести, не добавляется и фактически отображается пустым, когда я запускаю его через отладчик.

Вот тот JS, который у меня сейчас ... 

const html = document.querySelector('#html-area');
const md = document.querySelector('#markdown-area');

html.addEventListener("keyup", function(e) {
    md.innerHTML = e.target.value;
    const words = md.innerHTML.split(' ');
    const len = words.length;

    for(let i = 0; i < len; i++) {
        // if the first character is * and the last character is * and the length of the current word is greater than or equal to 2 then change that word by adding the ".bold" class to it. 
        if(words[i][0] === "*" && words[i][words[i].length - 1] === "*" && words[i].length >= 2){

            const indexOfWord = md.innerHTML.split(' ').indexOf(words[i]);

            const newWord = md.innerHTML.split(' ')[indexOfWord] = ` <span class="bold">${md.innerHTML.split(' ')[indexOfWord]}</span> `;

            const before = md.innerHTML.split(' ').slice(0, indexOfWord).join();

            md.innerHTML = before + newWord;

            break;
        }
    }
});

А вот и мой HTML ... 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>MarkDown</title>
  </head>
  <body>
    <!-- HTML -->
    <div id="app">
      <div id="html-container">
        <h2>HTML</h2>
        <section>
          <label for="html-area"></label>
          <textarea
            name="html-area"
            placeholder="type html here..."
            id="html-area"
          ></textarea>
        </section>
      </div>
      <!-- Markdown -->
      <section id="markdown-container">
        <h2>MarkDown</h2>
        <div>
          <div
            id="markdown-area"
          >Markdown text will show here...</div>
        </div>
      </section>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

Спасибо за любые советы или помощь.

1 Ответ

0 голосов
/ 06 апреля 2019

Одна вещь: здесь 

            md.innerHTML = before + newWord;

вы обрезаете вывод новым словом. Вам нужно определить некоторые after похожие на before и md.innerHTML = before + newWord + after;.

Хотя лучшим решением было бы сделать: split - map - join. Разделите введенный текст на слова, отобразите их в оригинальную или выделенную жирным шрифтом и присоедините обратно. Примерно так: 

const html = document.querySelector("#html-area");
const md = document.querySelector("#markdown-area");

const bold = word =>
  `<span class="bold">${word.substring(1, word.length - 1)}</span>`;

const boldOrNot = word =>
  word.startsWith("*") && word.endsWith("*") && word.length > 2
    ? bold(word)
    : word;

html.addEventListener("keyup", function(e) {
  const input = e.target.value;
  const output = input.split(" ").map(boldOrNot).join(" ");
  md.innerHTML = output;
});

https://codepen.io/anon/pen/jRrxZx

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...