个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建一个非常基本的 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] === "*" && 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>
感谢您的任何提示或帮助。
最佳答案
一件事:这里
md.innerHTML = before + newWord;
您正在使用 newWord 来剪切输出。你需要定义一些类似于before的after，以及md.innerHTML = before + newWord + after;。
虽然更好的解决方案是:拆分 - 映射 - 连接。将输入文本拆分为单词，将它们映射为原始版本或粗体版本，然后连接回来。像这样的事情:
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;
});
关于javascript - 更新镜像 div 中的文本后输入为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55547180/
25
4
0
我已经为使用 JGroups 编写了简单的测试。有两个像这样的简单应用程序 import org.jgroups.*; import org.jgroups.conf.ConfiguratorFact
我有一个通过 ajax 检索的 json 编码数据集。我尝试检索的一些数据点将返回 null 或空。 但是，我不希望将那些 null 或空值显示给最终用户，或传递给其他函数。 我现在正在做的是检查
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Why does one often see “null != variable” instead of “
嗨在我们公司，他们遵循与空值进行比较的严格规则。当我编码 if(variable!=null) 在代码审查中，我收到了对此的评论，将其更改为 if(null!=variable)。上面的代码对性能有影
我正在尝试使用 native Cordova QR 扫描仪插件编译项目，但是我不断收到此错误。据我了解，这是代码编写方式的问题，它向构造函数发送了错误的值，或者根本就没有找到构造函数。那么我该如何解决
我在装有 Java 1.8 的 Windows 10 上使用 Apache Nutch 1.14。我已按照 https://wiki.apache.org/nutch/NutchTutorial 中提
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: what is “=null” and “ IS NULL” Is there any difference bet
Three-EyedRaven 内网渗透初期，我们都希望可以豪无遗漏的尽最大可能打开目标内网攻击面，故，设计该工具的初衷是解决某些工具内网探测速率慢、运行卡死、服务爆破误报率高以及socks流
我想在Scala中像在Java中那样做: public void recv(String from) { recv(from, null); } public void recv(String
我正在尝试从一组图像补丁中创建一个密码本。我已将图像(Caltech 101)分成20 X 20图像块。我想为每个补丁创建一个SIFT描述符。但是对于某些图像补丁，它不返回任何描述符/关键点。我尝试使
我在验证器类中自动连接的两个服务有问题。这些服务工作正常，因为在我的 Controller 中是自动连接的。我有一个 applicationContext.xml 文件和 MyApp-servlet.
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 已关闭10 年前。 问题必须表现出对要解决的问题的最低程度的了解。告诉我们您尝试过做什么，为什么不起作用，以
大家好，我正在对数据库进行正常的选择，但是 mysql_num_rowsis 为空，我不知道为什么，我有 7 行选择。 如果您发现问题，请告诉我。 真的谢谢。 代码如下: function get_b
我想以以下格式创建一个字符串:id[]=%@&stringdata[]=%@&id[]=%@&stringdata[]=%@&id[]=%@&stringdata[]=%@&等，在for循环中，我得到
我正在尝试使用以下代码将URL转换为字符串: NSURL *urlOfOpenedFile = _service.myURLRequest.URL; NSString *fileThatWasOpen
我正在尝试将NSNumber传递到正在工作的UInt32中。然后，我试图将UInt32填充到NSData对象中。但是，这在这里变得有些时髦... 当我尝试将NSData对象中的内容写成它返回的字符串(
我正在进行身份验证并收到空 cookie。我想存储这个 cookie，但服务器没有返回给我 cookie。但响应代码是 200 ok。 httpConn.setRequestProperty(
我认为 Button bTutorial1 = (Button) findViewById(R.layout.tutorial1); bTutorial1.setOnClickListener
我的 Controller 中有这样的东西: model.attribute("hiringManagerMap",hiringManagerMap); 我正在访问此 hiringManagerMap
我想知道如何以正确的方式清空列表。在 div 中有一个列表然后清空 div 或列表更好吗？ 我知道这是一个蹩脚的问题，但请帮助我理解这个 empty() 函数:) 案例)如果我运行这个脚本会发生什么:
我是一名优秀的程序员,十分优秀！