草庐IT

jquery - 影响整个页面的 HTML 输入

coder 2023-08-09 原文

我正在制作一个页面，您可以在其中输入 HTML 并在旁边的 div 中查看输出。
代码:

$("#tryit").keyup(function() {
  var input = $(this).val();
  $("#readout").html(input);
});
#readout {
  height: 400px;
  width: 48%;
  border: 1px solid black;
  overflow: auto;
  float: right;
  clear: none;
  display: inline-block;
}
#tryit {
  height: 396px;
  width: 50%;
  float: left;
  clear: none;
  display: inline-block;
  font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;
</textarea>

<div id="readout"></div>

它按预期工作:它将 HTML 输出到 #readout .出问题的是当用户添加 <style> head 中的标签.然后那里添加的样式不仅会影响文本输入中的 HTML，还会影响整个页面。
如何让 CSS 只影响用户的输入，而不影响整个页面？
这是 Problem Page .

最佳答案

您真的应该考虑使用不同的方法来实现这一目标。

如果您真的想使用目前已有的内容，则必须替换 textarea 值中的很多内容。只是为了给你一个想法，在下面的代码片段中我只替换了 html和 body使用 id 的样式声明(#readout) 将样式应用于#readout div而不是 body页面的。它确实适用于 body ，但是所有其他可能的声明是什么？

当然，在正则表达式方面我是一个真正的菜鸟，我相信这可以做得更好，但所有这些都不是必需的。

$("#tryit").keyup(function() {
    var style = $(this).val().match(/<style>(.*)<\/style>/);
    if (style !== null && style.length > 0) {
        var bodyReplace = style[1].replace(/(^|\s)(html)|(body)(\s|$)/ig, '#readout');
    }
  var input = $(this).val();
  $("#readout").html(input.replace(/<style>.*<\/style>/, '<style>'+bodyReplace+'</style>'));
});

$("#tryit").keyup();
#readout {
  height: 400px;
  width: 48%;
  border: 1px solid black;
  overflow: auto;
  float: right;
  clear: none;
  display: inline-block;
}
#tryit {
  height: 396px;
  width: 50%;
  float: left;
  clear: none;
  display: inline-block;
  font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt;<style>body {background: black; color: red }</style> &lt;/head&gt; &lt;body&gt;<h1>Hello</h1> &lt;/body&gt; &lt;/html&gt;
</textarea>
<div id="readout"></div>

另一个问题是 <doctype> , <html> , <head>和 <body> textarea 中的元素并不真正存在。看看源码，你会发现它们不在那里，也不属于那里。话虽这么说，我会选择 Barmar 的评论中提到的解决方案，他建议使用 iframe .

其实实现起来并不难。一种快速而肮脏的方法是创建一个 blob来自文本区域 value并将其添加到 iframe 的源属性中.这甚至可以通过为 CSS 设置另一个文本区域并将其注入(inject) value 来轻松分离 HTML 和 CSS。作为样式表放入 iframe 的头部.因为我不能使用 iframe SO 片段工具中的东西，因为沙箱安全性的东西检查这个

JSFIDDLE

我相信你会明白的。

关于jquery - 影响整个页面的 HTML 输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31465813/

jqueryHTMLcodeampgt

有关jquery - 影响整个页面的 HTML 输入的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. .net - .NET 将如何影响 Python 和 Ruby 应用程序？ - 2

    我很好奇.NET将如何影响Python和Ruby应用程序。用IronPython/IronRuby编写的应用程序是否会非常特定于.NET环境，以至于它们实际上将变得特定于平台？如果他们不使用任何.NET功能，那么IronPython/IronRuby相对于非.NET同类产品的优势是什么？ 最佳答案 我不能说任何关于IronRuby的东西，但是大多数Python实现(如IronPython、Jython和PyPy)都试图尽可能忠实于CPython实现。不过，IronPython正在迅速成为这方面的佼佼者之一，并且在PlanetPyth

  10. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

随机推荐