Re:从零开始的markdown编辑器-2-去除空行

2025年01月23日 769 字大概 4 分钟

2.去除空行

效果展示

知识补充

模板字符串

input

for循环

实现思路

JS

这一步非常简单, 不需要思路, 但注意观察结构, 方便后续添加新功能与优化

处理原始输入

以换行符 \n 分割原始输入

/**
 * 原有代码(部分)
 * const input = document.getElementById('input');
 */
const ori = input.value;
let oris = ori.split('\n');

去空

// 去空
let filter = []
for (let i of oris){
    if (i){
        filter = [...filter, i]
    }
}
md = filter.join('\n');

将整体用函数嵌套

function handleinput(ori){
    let oris = ori.split('\n');
    // 去空
    let filter = []
    for (let i of oris){
        if (i){
            filter = [...filter, i]
        }
    }
    md = filter.join('\n');
    return md;
};

调用

document.addEventListener('DOMContentLoaded', (event) => {
    const input = document.getElementById('input');
    const output = document.getElementById('output');
    input.addEventListener('input', (event) => {
        output.innerHTML = handleinput(input.value);
    });
});
function handleinput(ori){
    let oris = ori.split('\n');
    // 去空
    let filter = []
    for (let i of oris){
        if (i){
            filter = [...filter, i]
        }
    }
    md = filter.join('\n');
    return md;
};

调试

在此阶段, 因为 HTML 渲染问题无法显示换行, 我们临时给每个元素添加一个 p标签 来替代

代码调整如下:

document.addEventListener('DOMContentLoaded', (event) => {
    const input = document.getElementById('input');
    const output = document.getElementById('output');
    input.addEventListener('input', (event) => {
        output.innerHTML = handleinput(input.value);    
    });
});
function handleinput(ori){
    let oris = ori.split('\n');
    // 去空
    let filter = []
    for (let i of oris){
        if (i){
            filter = [...filter, `<p>${i}</p>`]
        }
    }
    md = filter.join('\n');
    return md;
};

代码展示

项目结构:

index.html
css
- index.css
js
- index.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>md</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/index.js"></script>
</head>

<body>
  <div class="container">
    <div class="input">
      <textarea id="input"></textarea>
    </div>
    <div class="output">
      <span id="output"></span>
    </div>
  </div>
</body>

</html>

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  display: flex;
}

.input {  
  flex: 1;
  margin: 16px;
}

.output {  
  flex: 1;
  margin: 16px;
}

.input #input {  
  height: 200px;
  width: 100%;
  padding: 10px;
}

.output #output {
  padding: 10px;
}

index.js

document.addEventListener('DOMContentLoaded', (event) => {
        const input = document.getElementById('input');
        const output = document.getElementById('output');
        input.addEventListener('input', (event) => {
            // 考虑添加防抖 
            output.innerHTML = handleinput(input.value);    
        });
    });
    function handleinput(ori){
        let oris = ori.split('\n');
        // 去空
        let filter = []
        for (let i of oris){
            if (i){
                filter = [...filter, `<p>${i}</p>`]
            }
        }
        md = filter.join('\n');
        return md;
    };