文本输入实时预览

闷声发横财 2023-06-14 代码

要实现将文本框</code>中的[img]图片地址[/img]转换为可视化的 <code><img></code> 标签以显示图片，可以使用 JavaScript 来监听文本框内容的变化，并在发生变化时进行转换和更新显示。</p> <p><code><!DOCTYPE html><br /> <html><br /> <head><br /> <title>实时转换图片标签</title><br /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><br /> </head><br /> <body><br /> <textarea id="content" rows="4" cols="50">

在上述示例中，我们使用了 jQuery 来监听 </code> 的输入事件 <code>input</code>，并获取文本框中的内容。然后，使用正则表达式将 <code>[img]图片地址[/img]</code> 替换为 <code><img decoding="async" src="图片地址"></code>，并将结果更新到一个 <code></p> <div></code> 容器中以实时显示转换后的内容。</p> </div> <div class="post--single__action"> <button class="button--like like-btn" aria-label="like the post"> <svg class="icon--active" viewBox="0 0 1024 1024" width="32" height="32"> <path d="M780.8 204.8c-83.2-44.8-179.2-19.2-243.2 44.8L512 275.2 486.4 249.6c-64-64-166.4-83.2-243.2-44.8C108.8 275.2 89.6 441.6 185.6 537.6l32 32 153.6 153.6 102.4 102.4c25.6 25.6 57.6 25.6 83.2 0l102.4-102.4 153.6-153.6 32-32C934.4 441.6 915.2 275.2 780.8 204.8z"></path> </svg> <svg class="icon--default" viewBox="0 0 1024 1024" width="32" height="32"> <path d="M332.8 249.6c38.4 0 83.2 19.2 108.8 44.8L467.2 320 512 364.8 556.8 320l25.6-25.6c32-32 70.4-44.8 108.8-44.8 19.2 0 38.4 6.4 57.6 12.8 44.8 25.6 70.4 57.6 76.8 108.8 6.4 44.8-6.4 89.6-38.4 121.6L512 774.4 236.8 492.8C204.8 460.8 185.6 416 192 371.2c6.4-44.8 38.4-83.2 76.8-108.8C288 256 313.6 249.6 332.8 249.6L332.8 249.6M332.8 185.6C300.8 185.6 268.8 192 243.2 204.8 108.8 275.2 89.6 441.6 185.6 537.6l281.6 281.6C480 832 499.2 838.4 512 838.4s32-6.4 38.4-19.2l281.6-281.6c96-96 76.8-262.4-57.6-332.8-25.6-12.8-57.6-19.2-89.6-19.2-57.6 0-115.2 25.6-153.6 64L512 275.2 486.4 249.6C448 211.2 390.4 185.6 332.8 185.6L332.8 185.6z"></path> </svg> </button> </div> <div class="article--tags"><a href="https://www.weichangen.com/archives/tag/html" rel="tag">HTML</a></div> </article> <div class="post--ingle__comments"> </div> </div> <footer class="site--footer u-textAligncenter"> <div>© 2025 杂记本，想到什么写点什么...</div> </footer> </div> <div class="backToTop"> <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true"> <path d="M7.50015 0.425011C7.42998 0.354396 7.34632 0.298622 7.25415 0.261011C7.07101 0.187003 6.86629 0.187003 6.68315 0.261011C6.59128 0.298643 6.50795 0.354423 6.43815 0.425011L0.728147 6.13201C0.595667 6.27419 0.523544 6.46223 0.526972 6.65653C0.530401 6.85084 0.609113 7.03622 0.746526 7.17363C0.883939 7.31105 1.06932 7.38976 1.26362 7.39319C1.45793 7.39661 1.64597 7.32449 1.78815 7.19201L6.21615 2.76501V13.024C6.21615 13.2229 6.29517 13.4137 6.43582 13.5543C6.57647 13.695 6.76724 13.774 6.96615 13.774C7.16506 13.774 7.35583 13.695 7.49648 13.5543C7.63713 13.4137 7.71615 13.2229 7.71615 13.024V2.76501L12.1441 7.19201C12.2868 7.32867 12.4766 7.40497 12.6741 7.40497C12.8717 7.40497 13.0615 7.32867 13.2041 7.19201C13.3444 7.05126 13.4231 6.86068 13.4231 6.66201C13.4231 6.46334 13.3444 6.27277 13.2041 6.13201L7.50015 0.425011Z"></path> </svg> </div> </main> </body> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/hera-develop\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" id="hera-script-js-extra"> /* <![CDATA[ */ var obvInit = {"is_single":"1","post_id":"5925","restfulBase":"https:\/\/www.weichangen.com\/wp-json\/","nonce":"f6d46c274e","darkmode":"1","version":"0.1.6","is_archive":"","archive_id":"5925","hide_home_cover":"","timeFormat":{"second":"\u79d2\u524d","seconds":"\u79d2\u524d","minute":"\u5206\u949f\u524d","minutes":"\u5206\u949f\u524d","hour":"\u5c0f\u65f6\u524d","hours":"\u5c0f\u65f6\u524d","day":"\u5929\u524d","days":"\u5929\u524d","week":"\u5468\u524d","weeks":"\u5468\u5929","month":"\u4e2a\u6708\u524d","months":"\u4e2a\u6708\u524d","year":"\u5e74\u524d","years":"\u5e74\u524d"}}; /* ]]> */ </script> <script type="text/javascript" src="https://www.weichangen.com/wp-content/themes/hera-develop/build/js/ts.js?ver=0.1.6" id="hera-script-js"></script> <script type="text/javascript" src="https://www.weichangen.com/wp-includes/js/comment-reply.min.js?ver=6.8.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </html>

记事本