在线文本替换工具、支持正则表达式（博客园文章里添加Javascript或＜script＞语句）

最新推荐文章于 2023-06-17 22:13:18 发布

Ts势

最新推荐文章于 2023-06-17 22:13:18 发布

阅读量1.4k

点赞数

分类专栏：工具文章标签： javascript 正则表达式前端

本文链接：https://blog.csdn.net/lsllll44/article/details/121285882

版权

本文介绍了如何在博客园发布一个支持正则表达式的在线文本替换工具，该工具由HTML和JavaScript组成，允许用户自定义多条替换规则。文章详细讲解了在博客园中添加JavaScript文件的方法，包括申请权限、上传文件和添加JS代码。此外，还提醒了用户关于JS文件更新的注意事项和如何限制JS代码只在特定文章中运行。

摘要由CSDN通过智能技术生成

概况与介绍

在博客园发布一篇文章，文章就是《在线文本替换工具、支持正则表达式》https://www.cnblogs.com/lsllll44/articles/15522697.html

这是一个Html + JavaScript 组成的工具，由于博客园支持以html的方式发布文章以及上传自己的js文件（CSDN不支持），所以发布后就可以直接在线运行一些小工具。
介绍：

这个工具的作用就是文本替换，左边是被替换的字符，右边是替换的字符，点击change按钮进行替换。
默认没有开启正则表达式，把小框选中可以开启。
文本替换的功能编辑器一般都有，因为有一段时间有很多文本要替换，但是编辑器的替换行只有一个，所以用这个做了个可以添加多个替换行的功能。
点击替换后，默认会把左边的文章输入栏清空，默认会复制右边的被替换栏目的内容。

博客园文章里添加Javascript

如何在博客园的文章里添加JavaScript文件的引用或<script>语句块呢？
首先：要有一个账号，需要申请开通博客权限，然后去博客设置–》设置–》JS权限申请，开通JS权限。然后可以继续进行。
然后开始编辑一个文章；
1）编辑器，选择可以HTML编辑的编辑器
2）点击HTML编辑按钮，弹出一个文本输入框。
3）把我们的HTML的文件，复制到里面。
在这里插入图片描述
上传JS文件：
博客设置—》文件。进入即可上传，复制文件的链接，就可以被HTML文章使用了。

注意：可能文件缓存的原因，同名的文件上传（即使修改了内容）不会生效，不得不修改文件的名称再上传。有些麻烦！！！

在这里插入图片描述

JS的添加：
我们在在上面的HTML源码编辑器里的<script>标签实际上是会被处理掉的，无法运行内容。但是我们开通了JS权限，就可以在博客设置—》设置
里面添加<script>标签，运行JS文件。

注意：<script>标签是否有效在未发布的文章和发布文章里不同。

//=========================

注意：页首和页脚的JS代码，会在你发布的所有文章都运行。如果我们直接使用
<script type="text/javascript" src="xx.js" ></script>这条的方式引入JS文件，使得对一个特定文章的JS文件应用于所有的文章，这样很不好。解决的办法就是条件判断，符合条件的文章则包含这个js文件。

在这里插入图片描述
页首HTML代码：
大概的意思就是，如果文章的标题与期望的标题是一样的。就再<head>标签里加上一个包含所需js的<script>标签。

<script>
    let a1_t1 = "在线文本替换工具，支持正则表达式。";
    window.onload=function(){
   
        //console.log($("h1").first().find("span").first().html());
        if($("h1.block_title").first().find("span").first().html() == a1_t1 ){
   
            console.log(a1_t1);
            $("head").append(
'<script type=\"text/javascript\" src=\"https://files.cnblogs.com/files/blogs/716769/h5blog_v8.8.js\">'+'<'+'/script>');
        }else{
   
            //console.log("no result");
        }
    }
</script>

HTML文件

<!DOCTYPE html>

<html>

<head>
    <!-- <link rel="stylesheet" href="h5blog.css" /> -->
    <!-- <script src="h5blogs.js"></script> -->

    <style>
        * {
      box-sizing: border-box;margin: 0;padding: 0;}

        *+* {
      margin-top: 0.1em;}

        body {
     margin: 20px 10px;}

        #ap2 {
     
            background-color: black;
            color: white;
            line-height: 1.5em;
            display: flex;
            justify-content: center;
        }

        ul li {
     
            margin: 0.1em;
            font-size: 0.3em;
            padding: 00.3em;
        }

        #notes {
     
            margin-bottom: 2em;
            color: blue;
            margin-left: 2em;
        }

        #addMyReg {
     
            display: flex;
            flex-direction: column;
            height: 260px;
            flex-wrap: wrap;
            align-content: flex-start;<