如何快速在文章中英文数字间自动添加空格

在中文、英文、数字之间用空格隔开,观感和阅读上显得更加分明,也就是说整体的排版会更加的好看,但是如果在编写文章的时候去添加,就会显得特别的繁琐和降低编辑或写作效率了,不过为了养成习惯,还是推荐在编写的时候手动添加空格

这篇文章是给懒人朋友提供福利,不用手动添加空格了,首先我们来看一下什么时候需要添加空格

1. 中英文之间需要增加空格
2. 中文与数字之间需要增加空格
3. 数字与单位之间需要增加空格
4. 全角标点与其他字符之间不加空格

以下分别对于普通的Html文章、WordPress文章以及使用MarkDown生成的文章说明

WordPress

WordPress我们先说使用PHP来解决的方法,有2种方案,任选一种就可以,在主题的functions.php文件中添加以下代码

1. 不直接在写入数据库前执行,而是当 WordPress 输出文章内容的时候执行

//WordPress 文章中英文数字间自动添加空格(不写入数据库)
add_filter( 'the_content','fanly_post_content_autospace' );
function fanly_post_content_autospace( $data ) {
        $data = preg_replace('/([\x{4e00}-\x{9fa5}]+)([A-Za-z0-9_]+)/u', '${1} ${2}', $data);
        $data = preg_replace('/([A-Za-z0-9_]+)([\x{4e00}-\x{9fa5}]+)/u', '${1} ${2}', $data);
        return $data;
}

2. 在 WordPress 后台编辑时执行,也就是当我们发布、更新、保存文章的时候就会自动执行,写入数据库的内容都将是自动添加了空格的,并且处理的对象为文章标题与文章内容。仅只对新发布的文章生效,之前发布的不生效

//WordPress 文章中英文数字间自动添加空格(写入数据库)
add_filter( 'wp_insert_post_data', 'fanly_post_data_autospace', 99, 2 );
function fanly_post_data_autospace( $data , $postarr ) {
	$data['post_title'] = preg_replace('/([\x{4e00}-\x{9fa5}]+)([A-Za-z0-9_]+)/u', '${1} ${2}', $data['post_title']);
	$data['post_title'] = preg_replace('/([A-Za-z0-9_]+)([\x{4e00}-\x{9fa5}]+)/u', '${1} ${2}', $data['post_title']);
	$data['post_content'] = preg_replace('/([\x{4e00}-\x{9fa5}]+)([A-Za-z0-9_]+)/u', '${1} ${2}', $data['post_content']);
	$data['post_content'] = preg_replace('/([A-Za-z0-9_]+)([\x{4e00}-\x{9fa5}]+)/u', '${1} ${2}', $data['post_content']);
	return $data;
}

普通的Html文章

这里就需要祭出大杀器了,在WordPress当中也是可以直接使用的,就是pangu.js。使用也是十分方便,我们来看一下

<script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js"></script>
<script>
pangu.spacingPage();
</script>

上面是最基础的操作,全局都进行自动加空格处理,还有另外一些操作

pangu.spacingElementById('main'); //在id=main的区域进行自动加空格处理
pangu.spacingElementByClassName('comment'); //在class=comment的区域进行自动加空格处理
pangu.spacingElementByTagName('p'); //在标签p里面进行自动加空格处理

对应的标签属性可以根据你的实际系统中的修改

MarkDown

还有一些文档系统,是使用MarkDown语法来生成的文章,比如docsify,我使用了docsify写了一个编程笔记的网站,把一些常用的信息记录一下,地址是https://notes.qq52o.me/

对于MarkDown的文档,其实pangu是不支持的,但是docsify中可以使用,因为他提供了钩子,可以在hook.doneEach解析MarkDown的时候进行调用,所以我们可以这样写

(function(u, c) {
    var d = document, t = 'script', o = d.createElement(t),
                      s = d.getElementsByTagName(t)[0];
              o.src = u;
              if (c) { o.addEventListener('load', function(e) { c(e); }); }
              s.parentNode.insertBefore(o, s);
            })('//cdn.staticfile.org/pangu/4.0.7/pangu.min.js', function() {
    pangu.spacingPage();
});

而且还是异步加载,岂不美滋滋?

4 条评论

发表评论

*