Question

请创建一个textarea预览，就像stackoverflow一样，它会立即显示您输入的文本。而且我相信我已经做对了。现在我还要启用内联代码（例如this is an inline code），我已经完成了它并且它完美无缺。这是我的代码：

$("#comment").keyup(function(){
if($(this).val() == ""){
   $('#preview').css('display','none');
}else{
   $('#preview').css('display','block');
}
// $("#preview").html($(this).val());
$("#preview").text($(this).val()); // If you want html code to be escaped
$("#preview").html($("#preview").html().replace(/`(.*?)`/g, "<span><code class='inline_code'>$1</code></span>"));
getting = document.getElementByTagName("code").html;
$("code").text(getting);
});

现在我想对块代码使用相同的方法（例如）

this is a block code

所以我在.replace行下面添加了这行代码这次替换了4个空格，但仅在开头

$("#preview").html($("#preview").html().replace(/    (.*?)/g, "<span><code class='block_code'>$1</code></span>"));

但它只显示正常文本而不应用我的CSS样式。所以我还在最后添加了另外4个空格

$("#preview").html($("#preview").html().replace(/    (.*?)    /g, "<span><code class='block_code'>$1</code></span>"));

这次它有效，但我不想在最后有4个空位。我一开始只想要它，所以我不必给4个空格来结束代码。

总之，我只想让我的textarea和预览工作就像stackoverflow一样。如果有必要，这是我的HTML：

<textarea name="comment" id="comment" class="textarea"></textarea>
<div id="preview" class="preview"></div>

Answer 1

我已经找到了我的问题的解决方案，我也给出了答案question

这里我做了一些看起来很像stackoverflow的项目。虽然stackoverflow不是100％相同，但至少它具有stackoverflow的大多数功能，你可以在这里查看它（http://stack.stephensangkn.org）。但我故意发布图像上传，因为它与服务器有关。我认为这很酷。您还可以在页面中看到下载链接以下载源代码

阻止代码预览

1 个答案: