如何快速在文章中英文數字間自動添加空格

  • 2019 年 12 月 16 日
  • 筆記

在中文、英文、數字之間用空格隔開，觀感和閱讀上顯得更加分明，也就是說整體的排版會更加的好看，但是如果在編寫文章的時候去添加，就會顯得特別的繁瑣和降低編輯或寫作效率了，不過為了養成習慣，還是推薦在編寫的時候手動添加空格

這篇文章是給懶人朋友提供福利，不用手動添加空格了，首先我們來看一下什麼時候需要添加空格

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

而且還是非同步載入，豈不美滋滋？

沈唁志，一個PHPer的成長之路！ 任何個人或團體，未經允許禁止轉載本文：《如何快速在文章中英文數字間自動添加空格》，謝謝合作！

VirMach 便宜 VPS

QNews

QNews