Question

我正在尝试创建一个非常基本的markdown编辑器。我在左侧使用textarea键入数据，在右侧使用入口点div来存储我键入的所有内容，这是使用“ keyup”侦听器键入的内容。当在单词的开头和结尾使用*格式化代码时，我已经获得了将文本应用于粗体的文本，但是在DOM更新后，我尝试输入的下一个单词没有添加并且实际上在通过调试器运行时显示为空白。

这是我目前拥有的JS ...

{ item: 'Trouble making my script print None in case there is no result to display',
  item_link: undefined }

这是我的HTML ...

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;
        }
    }
});

感谢任何提示或帮助。

Answer 1

一件事：在这里

            md.innerHTML = before + newWord;

您正在使用newWord剪切输出。您需要定义一些类似于after和before的{{1}}。

尽管更好的解决方案是：split-map-join。将输入文本拆分为单词，将其映射为原始或粗体，然后重新加入。像这样：

md.innerHTML = before + newWord + after;

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

我在镜像div中更新文本后输入为空白

1 个答案: