html在线浏览代码,Js实现HTML代码预览功能，直接显示网页代码运行效果

可以使用iframe标签来实现HTML代码预览功能。具体实现方法如下：

1. 创建一个textarea输入框，让用户输入HTML代码。

2. 在页面中创建一个iframe标签，用于显示用户输入的HTML代码。

3. 使用JavaScript监听textarea输入框的值变化事件，当用户输入HTML代码时，将代码赋值给iframe的srcdoc属性。

4. 如果用户输入的HTML代码中包含了CSS和JS代码，需要将CSS和JS代码也加入到iframe中。

以下是示例代码：

HTML部分：

<textarea id="htmlCode"></textarea>
<iframe id="preview"></iframe>

JavaScript部分：

var htmlCode = document.getElementById("htmlCode");
var preview = document.getElementById("preview");

// 监听textarea输入框的值变化事件
htmlCode.addEventListener("input", function() {
  var code = htmlCode.value;

  // 将HTML代码添加到iframe中
  preview.srcdoc = code;

  // 将HTML代码中的CSS和JS代码也添加到iframe中
  var css = "<style>" + getCSS(code) + "</style>";
  var js = "<script>" + getJS(code) + "</script>";
  preview.contentDocument.head.innerHTML = css;
  preview.contentDocument.body.innerHTML = js;
});

// 获取HTML代码中的CSS代码
function getCSS(code) {
  var css = "";
  var regex = /<style>([\s\S]*?)<\/style>/g;
  var match;
  while ((match = regex.exec(code)) != null) {
    css += match[1];
  }
  return css;
}

// 获取HTML代码中的JS代码
function getJS(code) {
  var js = "";
  var regex = /<script>([\s\S]*?)<\/script>/g;
  var match;
  while ((match = regex.exec(code)) != null) {
    js += match[1];
  }
  return js;
}

这样就可以实现在线浏览HTML代码，并且可以直接显示网页代码运行效果了。