星空晶体 发表于 2024-7-3 18:51:50

星空晶体的BBcode预览器的第二个版本发布

网站
https://yiyi14514.github.io/BBcode_beta2
这是第二个版本，已经支持表格等重要的标签，且修复了一点bug

目前支持标签：
color backcolor size
url img
b s u i hr
（下面是新增标签）
table、tr、td
list
quote、spoiler、hide
（详细使用教程见【BGM】帖子排版技巧【超级详细】 ，里面有大佬的教程）
其他：修改了界面，取消背景图、预览内容不再会让网页延伸，而是在一个固定框里可以向下滑动。

bug修复：修正 url 标签的bug：原来的url仅支持这种使用
xxx现在支持https://xxx.com（链接文本直接显示，且能跳转）

新增展示：


源码: <!DCTYPE html>
<html>
    <head>
      <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>BBcode预览器</title>
      <style>
      body{
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-family: ‘Microsoft YaHei’, sans-serif;
      filter: blur(px); /* 这里设置模糊度，数值越大越模糊 */
      }
      
      #qianyan {
      border: 2px solid orange;
      margin-top: 20px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0);
      }
      #qianyan .biaoti {
      text-align: center;
      color: #87ceeb;
      /*text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); 添加一个轻微的阴影以增强效果 */
      
      }
      #qianyan .wen {
      
      color: #00008B
      }
      #zhengshi {
      color: black;
      background-color: white;
      
      border: 2px solid orange;
      margin-top: 20px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0);
      overflow: hidden; /* 添加这个属性来防止内容溢出 */
}

      #yulan {
      margin-left: 20px;
      width: calc(100% - 40px); /* 使用calc函数动态计算宽度 */
      height: 260px;
      border: 2px solid #00008B;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0);
      
      overflow: hidden;
}

      #zhengshi .biaoti {
      text-align: center;
      color: #87ceeb;
      
       /* text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); 添加一个轻微的阴影以增强效果 */
      }
      #zhengshi .anniu {
      width: 200px; /* 设置按钮的宽度 */
      height: 50px; /* 设置按钮的高度 */
      padding: 10px; /* 设置内边距 */
      
      border: 1px solid #00008B; /* 设置边框样式和颜色 */
      border-radius: 25px; /* 设置边框角的半径 */
      background-color: rgba(255, 255, 255, 0);;
      margin-left: 80px; /* 设置按钮距离左侧80像素 */
      margin-top: 20px;      
      
      }
       #zhengshi .biaoti1 {
      
      text-align: center;
      color: #87ceeb
      /*text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);添加一个轻微的阴影以增强效果 */
       }
       table {
         width: 100%;
         border-collapse: collapse;
         color: black;
}

       tr, td {
         border: 1px solid black;
}
       ol, ul {
margin: 0; /* 移除默认的外边距 */
padding: 0; /* 移除默认的内边距 */
list-style-position: inside; /* 将列表标记放在文本内边距中 */
}

li {
margin: 0; /* 移除默认的外边距 */
padding: 0; /* 移除默认的内边距 */
line-height: 1.5; /* 设置行高，确保文本垂直居中 */
vertical-align: middle; /* 设置垂直对齐方式 */
}
   #output {
    background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
    border: 1px solid #00008B; /* 边框 */
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    width: 94%;
    height: 400px; /* 设置固定高度 */
   /* 隐藏水平滚动条 */
    overflow-y: auto; /* 当内容超过高度时显示垂直滚动条 */
    word-wrap: break-word; /* 允许长单词或URL换行 */
    white-space: pre-wrap; /* 保留空白，但允许适当换行 */
}

#output1 {
    font-size: 20px;
    margin: 0; /* 移除默认的margin */
    white-space: pre-wrap; /* 保留空白，但允许适当换行 */
}

    </style>
      <script>
      function jiexi() {
var shuchu = document.getElementById(“yulan”).value;
yulan = shuchu
    .replace(/\]+)\](.*?)\[\/color\]/gi, function(match, color, content) {
      return ‘<span style="color: ' + color + '">‘ + content + ‘</span>‘;
    })
    .replace(/\]+)\](.*?)\[\/backcolor\]/gi, function(match, backcolor, content) {
      return ‘<span style="background-color: ' + backcolor + '">‘ + content + ‘</span>‘;
    })
    .replace(/\(.*?)\[\/size\]/gi, function(match, size, content) {
      var fontSize;
      switch (size) {
      case ‘1’:
          fontSize = ‘12px’;
          break;
      case ‘2’:
          fontSize = ‘16px’;
          break;
      case ‘3’:
          fontSize = ‘20px’;
          break;
      case ‘4’:
          fontSize = ‘24px’;
          break;
      case ‘5’:
          fontSize = ‘28px’;
          break;
      case ‘6’:
          fontSize = ‘32px’;
          break;
      case ‘7’:
          fontSize = ‘36px’;
          break;
      case ‘8’:
          fontSize = ‘40px’;
          break;
      default:
          fontSize = ‘20px’;
          break;
      }
      return ‘<span style="font-size: ' + fontSize + '">‘ + content + ‘</span>‘;
    })
    .replace(/\]+)\](.*?)\[\/url\]/gi, function(match, url, content) {
      return ‘<a href="' + url + '" target="_blank">‘ + content + ‘</a>‘;
    })
    .replace(/\(.*?)\[\/url\]/gi, function(match, url) {
      return ‘<a href="' + url + '" target="_blank">‘ + url + ‘</a>‘;
    })
    .replace(/\/g, “<strong>“)
    .replace(/\[\/b\]/g, “</strong>“)
    .replace(/\/g, “<s>“)
    .replace(/\[\/s\]/g, “</s>“)
    .replace(/\/g, “<u>“)
    .replace(/\[\/u\]/g, “</u>“)
    .replace(/\/g, “<i>“)
    .replace(/\[\/i\]/g, “</i>“)
    .replace(/\(.*?)\[\/quote\]/gs, function(match, quoteContent) {
      return ‘<div style="border: 1px dashed orange; padding: 10px; margin: 10px 0; background-color: #ffe0a3; color: #d97008;">‘ + ‘回复 ‘+ quoteContent + ‘</div>‘;
    })
    .replace(/\/gi, ‘<table style="width: 98%;">‘)
    .replace(/\[\/table\]/g, “</table>“)
    .replace(/\/g, “<tr>“)
    .replace(/\[\/tr\]/g, “</tr>“)
    .replace(/\/g, “<td>“)
    .replace(/\[\/td\]/g, “</td>“)
    .replace(/\(.*?)\[\/spoiler\]/gs, function(match, spoilerContent) {
      return ‘<div style="border: 1px solid #00008B; padding: 0; margin: 10px 0;">‘ +
      ‘<div style="background-color: blue; color: white; text-align: center; padding: 5px;">折叠内容</div>‘ +
      ‘<div style="background-color: white; color: black; padding: 10px;">‘ + spoilerContent + ‘</div>‘ +
      ‘</div>‘;
})
    .replace(/\(.*?)\[\/hide\]/gs, function(match, points, hiddenContent) {
      return ‘<div style="border: 1px solid #00008B; padding: 0; margin: 10px 0;">‘ +
      ‘<div style="background-color: red; color: white; text-align: center; padding: 5px;">积分＞’ + points + ‘才能查看，否则需要回复！</div>‘ +
      ‘<div style="background-color: white; color: black; padding: 10px;">‘ + hiddenContent + ‘</div>‘ +
      ‘</div>‘;
})

    .replace(/\(.*?)\[\/align\]/gi, function(match, align, content) {
      return ‘<div style="text-align: ' + align + '">‘ + content + ‘</div>‘;
    })
    .replace(/\(.*?)\[\/list\]/gs, function(match, listContent) {
      return ‘<ol>‘ + listContent.replace(/\[\*\](.*?)\n?/g, ‘<li>$1</li>‘) + ‘</ol>‘;
    })
    .replace(/\(.*?)\[\/list\]/gs, function(match, listContent) {
      return ‘<ul>‘ + listContent.replace(/\[\*\](.*?)\n?/g, ‘<li>$1</li>‘) + ‘</ul>‘;
    })
    .replace(/\(.*?)\[\/img\]/g, “<img src=\"$1\" style=\"max-width: 100%; height: auto;\">“)
    .replace(/\[\hr\]/g, “<hr>");
document.getElementById("output1").innerHTML = yulan;
}



    </script>
    </head>
    <body>
      <div id="qianyan">
            <h1 class="biaoti">在 使 用 之 前</h1>
            <p class="wen"><strong>BBcode</strong>是一种简单、易学的<strong>标记语言。</strong>主要用于论坛、在线社区和公告板等平台的文本格式化。它基于HTML，但相比之下更为简单，易于学习和使用。BBcode通过使用特殊的标签来对文本进行格式化，这些标签在显示时会转换为HTML代码，从而实现在网页上的格式化效果。BBcode的语法类似于Html,但是是[]不是&lt;&gt;。此工具可快速预览BBcode代码，让用户可查看排版并修复不足的排版。</p>
      </div>
      <div id="zhengshi">
            <h1 class="biaoti">开 始 使 用</h1> <br> <textarea id="yulan" placeholder="请在这里输入你的BBcode代码"></textarea> <button class="anniu" onclick="jiexi()">点击预览</button> <br>
            <h1 class="biaoti1">↓下面预览↓</h1>
            <div id="output">
                <pre id="output1"></pre>
            </div>
      </div> <br>
    </body>
</html>

支持一下吧[贴吧_滑稽][贴吧_滑稽][贴吧_滑稽]

不朽苏美尔 发表于 2024-7-3 19:15:46

非常好网站，爱来自埃利都

瓜瓜华话 发表于 2024-7-3 22:56:42

哈哈哈，大佬的东西，根本看不懂，本人还要努力啊。

憎恶蜜蜂肝游戏 发表于 2024-7-4 07:38:31


感谢分享

我是李君子 发表于 2024-7-5 15:20:39

硬核屎山正则 ✓
[贴吧_滑稽][贴吧_滑稽][贴吧_滑稽]
页: [1]
查看完整版本: 星空晶体的BBcode预览器的第二个版本发布