E018 如何把文本文檔中指定信息提取單獨保存

Hi，How are you doing?

我是職場編碼（CodeVoc）。

在E000中，我們介紹了Node.js、Ruby、Electron等工具下載安裝。

這期，給你演示一下由Electron聯合Ruby製作的小工具。

播放

暫停

進入全屏

退出全屏

00:00

00:00

重播

請

刷新

試試

藉助Electron官方Demo，我們很容易製作一個工具展示平臺。

點擊“View Demo”會彈出我們的工具界面。

一、項目需求

這個工具的主要目的是為了把文本文檔中指定信息提取單獨保存。

它除了可以選擇源文件，還可以選擇目標文件。

我們只需要確定它的開始標記和結束標記，

點擊“執行”按鈕，就能實現文本文檔提取指定信息單獨保存。

二、界面設計

【html】

生成表單容器：

生成佈局標籤：

生成行內標籤：

生成單行輸入框：

<code><
input
 id=
"source_line"
><
input
 id=
"goal_line"
>
<
input
 id=
"mark_begin"
><
input
 id=
"mark_end"
>
/<code>

生成文件選擇按鈕：

<code><
input
 
type
=
"file"
 id=
"goal_file"
> 
<
input
 
type
=
"file"
 id=
"source_file"
> 
/<code>

生成普通按鈕：

【css】

關注四點前白後綠氣泡某詞平臺，搜索“職場編碼”查看源碼。

【javascript】

根據ID，選中source_file按鈕

<code>
var
 source_line=
document
.getElementById(
'source_line'
)
/<code>

給source_file按鈕，添加"change"事件

<code>
source_line.value
=document.getElementById(
'source_file'
).files[
0
].path 
/<code>

根據ID，選中goal_file按鈕，

<code>
var
 goal_line=
document
.getElementById(
'goal_line'
)
/<code>

給goal_file按鈕，添加"change"事件

<code>
goal_file.value
=document.getElementById(
'goal_file'
).files[
0
].path 
/<code>

execute按鈕添加單擊事件

<code>
execute
.addEventListener(
"click"
,
function
()
{獲取參數
1
,獲取參數
2
,獲取參數
3
,獲取參數
4
,調用})
/<code>

獲取參數1

<code>
var
 source_line=document.getElementById(
'source_line'
).
value
/<code>

獲取參數2

<code>
var
 goal_line=document.getElementById(
'goal_line'
).
value
/<code>

獲取參數3

<code>
var
 mark_begin=document.getElementById(
'mark_begin' 
).
value
;
/<code>

獲取參數4

<code>
var
 mark_end=document.getElementById(
'mark_end'
).
value
;
/<code>

調用Ruby腳本

<code>
const
 { spawn } = 
require
(
'child_process'
)
const
 ls = spawn(
'ruby'
, [
'Ruby腳本完整路徑'
,參數
1
,參數
2
,參數
3
,參數
4
])
/<code>

三、邏輯梳理

=> 基礎語法

創建四參數入口方法

<code>
def
 
Regular_extraction
(pth_source,pth_goal,mark_begin,mark_end)
/<code>

接收控制檯傳四參

<code>
Regular_extraction
(
ARGV
[0]
,
ARGV
[1]
,
ARGV
[2]
,
ARGV
[3]
)/<code>

讀取設置（開啟w模式）

<code>data = File.
read
(pth_source)
File.
open
(pth_goal, 
"w"
) 
do
 |f|
end
/<code>

設置正則表達式提取內容

<code>
regex
=//<code>

輸出設置

<code>data.scan(regex).each{
|m|
f.write
" 
#{m[
0
]}
"
} /<code>

關注四點前白後綠氣泡某詞平臺，搜索“職場編碼”查看源碼。