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

沈唁

发布于 2019-12-16 18:06:07

2K0

发布于 2019-12-16 18:06:07

文章被收录于专栏：沈唁志沈唁志

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

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

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

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

WordPress

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

不直接在写入数据库前执行，而是当 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;
}

在 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();
});

而且还是异步加载，岂不美滋滋？

沈唁志，一个PHPer的成长之路！ 任何个人或团体，未经允许禁止转载本文：《如何快速在文章中英文数字间自动添加空格》，谢谢合作！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除

wordpress