#javascript #dom
#javascript #dom
Вопрос:
Я пытаюсь создать очень простой редактор markdown. Я использую текстовую область слева для ввода данных, а справа у меня есть точка входа 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] === "*" amp;amp; words[i][words[i].length - 1] === "*" amp;amp; 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:
Одна вещь: здесь
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("*") amp;amp; word.endsWith("*") amp;amp; 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;
});