js簡單實現乙個json格式化功能

2021-10-05 18:22:49 字數 3555 閱讀 3837

rows

="10"

cols

="30"

v-on:keydown

="tabhandle"

v-model

="content"

>

textarea

>

style

="height

: 60vh;

border

: 1px solid #ccc;

padding-left

: 50px;

overflow-y

: auto

" >

style

="list-style

: decimal;

background

: #f8f8f8;

" v-for

="(j, index) in formatjsonlist"

:key

="index"

>

style

="margin:0"

>

}pre

>

li>

ol>

new

vue(

, watch:

this

.$set

(this

,'formatjsonlist',[

])},

deep:

true},

},methods:

// 只是按了tab,直接插入空格就可以了

this

.inserttext

(e.target,

' '

) e.returnvalue =

false}}

,// 插入空格

inserttext

(el, str)

elseif(

typeof el.selectionstart ===

'number'

&&typeof el.selectionend ===

'number'

)// 如果文字域內容被選中了,需要在選中的內容裡加入空格

let selectionstr = tmpstr.

substring

(startpos, endpos)

let newstr =

''// 把選中的內容新增對應的空格填充

selectionstr.

split

('\n').

foreach

((e, index)

=>

)// 改變為新值

el.value = tmpstr.

substring(0

, startpos)

+ newstr + tmpstr.

substring

(endpos)

// 選中當前編輯的內容

this

.selectioncontent

(el, startpos, startpos + newstr.length)

return

}else

this

.movecursor

(el, el.value.length)},

// shift和tab同時按下

shifttabhandle

(el)

$)/g,''

)}elseif(

typeof el.selectionstart ===

'number'

&&typeof el.selectionend ===

'number'

)$)/g,''

) cursorpos = reversestr.length

el.value = reversestr + tmpstr.

substring

(startpos, tmpstr.length)

el.selectionstart = el.selectionend = cursorpos

this

.movecursor

(el, cursorpos)

return

}// 獲取到選中的內容

let selectionstr = tmpstr.

substring

(startpos, endpos)

let newstr =

''// 把選中的內容切成陣列,並去除陣列內的前兩個空格

const selectionstrarray = selectionstr.

split

('\n'

) selectionstrarray.

foreach

((e, index)

=>)/,

'\n'

): e.

replace

(/(^\s)/,''

)})// 改變為新值

el.value = tmpstr.

substring(0

, startpos)

+ newstr + tmpstr.

substring

(endpos)

// 選中當前編輯的內容

this

.selectioncontent

(el, startpos, startpos + newstr.length)

return

}else

$)/g,''

)}this

.movecursor

(el, el.value.length)},

// 移動游標

movecursor

(el, topos)

elseif(

typeof el.selectionstart ===

'number'

&&typeof el.selectionend ===

'number')}

,// 選中內容

selectioncontent

(el, start, end)

else

if(el.createtextrange)},

// 格式化json

formatjson()

if(this

.content.

trim()

===''

)// 驗證一下json內容是否正確

trycatch(e

))return

}this

.content =

json

.stringify

(detail,

null,2

)},}

})

json內容獲取的方法比較簡單,就沒有在上面寫出,可以直接通過「json.parse(this.content)」獲取到。

**自測沒有問題,如果發現有問題的話,歡迎指正。

原生js格式化json和格式化xml的方法

在工作中一直看各位前輩的部落格解決各種問題,對我的幫助很大,非常感謝!之前一直比較忙沒有寫部落格,終於過年有了點空閒時間,可以把自己積累的東西分享下,筆記中的部分函式不是自己寫的,都是工作中一點點積累的,由於時間已久比較零散找不到對應的主人了,沒法註明出處還請見諒。我們經常遇到從後代拿到的沒有格式化...

寫乙個json格式化工具

準備 用js來寫 頁面操作元素就用jquery 頁面排版就用bootstrap。1 對於單純格式化json的話,只需要 var jsonchar key4 var jsonobj json.parse jsonchar var jsonfmt json.stringify jsonobj,null,...

js實現日期格式化

function format now,mask return zeros value return mask.replace b d m yy yy hhmstt 1?llz b g,function 0 使用時候直接呼叫方法 format date,yyyy mm dd hh mm 輸出格式為 ...