知乎答案格式化

答案格式化

  1. // ==UserScript==
  2. // @name 知乎答案格式化
  3. // @namespace zhihu_helper_tool
  4. // @version 1.0.5
  5. // @description 答案格式化
  6. // @author 浮游
  7. // @match *://www.zhihu.com/question/*
  8. // @connect zhihu.com
  9. // @connect vzuu.com
  10. // @require https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js
  11. // @require https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js
  12. // @run-at document-start
  13. // @grant GM_openInTab
  14. // @grant GM_setClipboard
  15. // @grant GM_info
  16. // @grant GM_download
  17. // @charset UTF-8
  18. // ==/UserScript==
  19.  
  20. ;(function() {
  21. 'use strict'
  22. document.addEventListener('DOMContentLoaded', () => {
  23. addButtonStyle()
  24. // addFormatStyle()
  25. })
  26.  
  27. const controllerClass = 'showNew'
  28. const newClass = '_new'
  29. const storageKey = 'SHOW_NEW'
  30.  
  31. const showNew = () => {
  32. $('body').addClass(controllerClass)
  33. }
  34.  
  35. const read = () => {
  36. const t = +localStorage.getItem(storageKey)
  37. log(t)
  38. if (t) {
  39. showNew()
  40. }
  41. }
  42.  
  43. const log = console.log.bind(console)
  44.  
  45. const innerSplit = (str, symbol) => {
  46. return str.split(symbol)
  47. }
  48.  
  49. const splitStrings = (arr, symbol) => {
  50. let output = []
  51. for (let i = 0; i < arr.length; ++i) {
  52. let s = arr[i].trim()
  53. let temp = innerSplit(s, symbol)
  54. output = output.concat(temp)
  55. }
  56. return output
  57. }
  58.  
  59. const smashString = (str, symbols) => {
  60. let output = innerSplit(str, ',')
  61. symbols.forEach(s => {
  62. output = splitStrings(output, s)
  63. })
  64. return output.filter(s => s.length)
  65. }
  66.  
  67. const parse = (ss, symbol) => {
  68. let result = ''
  69. let line = ''
  70. for (let i = 0; i < ss.length; ++i) {
  71. let s = ss[i].trim()
  72. line += s + ' '
  73. if (line.length > 20) {
  74. result += line + symbol
  75. line = ''
  76. }
  77. }
  78. // bug
  79. if (line.length) {
  80. result += line
  81. }
  82. return result
  83. }
  84.  
  85. // 思路:run只重新生成一个dom。。然后点击的时候切换dom即可
  86.  
  87. const run = () => {
  88. let answer = $('.RichContent-inner').eq(0)
  89. let copy = answer.clone()
  90. answer.addClass('_origin')
  91.  
  92. // copy.addClass(newClass).css('color', 'red');
  93. copy.addClass(newClass)
  94. answer.after(copy)
  95.  
  96. let ps = copy.find('p')
  97. ps.each(function() {
  98. let arr = smashString($(this).html(), [',', ' ', '。'])
  99. let temp = parse(arr, '<br>')
  100. $(this).html(temp)
  101. })
  102. }
  103.  
  104. // const showOrigin = () => {
  105. // toggleClass
  106. // $('body')
  107. // .removeClass(controllerClass)
  108. // }
  109. // const showNew = () => {
  110. // $('body')
  111. // .addClass(controllerClass)
  112. // }
  113.  
  114. const addButtonStyle = () => {
  115. var x = `
  116. body ._origin {
  117. display: block!important;
  118. }
  119.  
  120. body .${newClass} {
  121. display: none!important;
  122. }
  123.  
  124. body.showNew ._origin {
  125. display: none!important;
  126. }
  127.  
  128. body.showNew .${newClass} {
  129. display: block!important;
  130. }
  131.  
  132. .formatButton {
  133. margin: 10px;
  134. position: fixed;
  135. top: 0;
  136. right: 0;
  137. z-index: 9999;
  138. border-radius: 56px;
  139. padding: 6px 36px;
  140. background: #eee;
  141. color: #737070;
  142. transition: all 1s;
  143. font-size: 12px;
  144.  
  145. box-shadow: 1px 1px 20px #e1e1e1;
  146. }
  147.  
  148. body.showNew .formatButton {
  149. background: #e1e1e1;
  150. background: linear-gradient(0deg, #0384ff, #5a9cda);
  151. color: #fff;
  152. }
  153. `
  154. var y = document.createElement('style')
  155. y.innerHTML = x
  156. document.getElementsByTagName('head')[0].appendChild(y)
  157. }
  158.  
  159. const addFormatStyle = () => {
  160. var x = `
  161. .formatButton {
  162. margin: 10px;
  163. position: fixed;
  164. top: 0;
  165. right: 0;
  166. z-index: 9999;
  167. border: 2px solid #67cdef;
  168. border-radius: 6px;
  169. padding: 10px;
  170. background-color: #0084ff;
  171. color: white;
  172. }
  173.  
  174. .VoteButton {
  175. color: #be1480;
  176. background: #43ad7f7f;
  177. }
  178.  
  179. div.Question-mainColumn {
  180. margin: auto !important;
  181. width: 100% !important;
  182. }
  183.  
  184. // div.Question-sideColumn,.Kanshan-container {
  185. // display: none !important;
  186. }
  187.  
  188. .Profile-mainColumn {
  189. margin: auto !important;
  190. width: 100% !important;
  191. }
  192.  
  193. // .AuthorInfo-content, .AppHeader {
  194. // display: none !important;
  195. // }
  196.  
  197. // .ProfileHeader-content, .Profile-sideColumn{
  198. // display: none !important;
  199. // }
  200.  
  201. figure {
  202. max-width: 70% !important;
  203. }
  204.  
  205. .RichContent-inner {
  206. line-height: 30px !important;
  207. margin: 40px 60px !important;
  208. padding: 40px 50px !important;
  209. border: 6px dashed rgba(133,144,166,0.2) !important;
  210. border-radius: 6px !important;
  211. }
  212.  
  213. .Comments {
  214. padding: 12px !important;
  215. margin: 60px !important;
  216. }
  217.  
  218. `
  219. var y = document.createElement('style')
  220. y.innerHTML = x
  221. document.getElementsByTagName('head')[0].appendChild(y)
  222. }
  223.  
  224. const shiftDom = newDom => {}
  225.  
  226. const _main = () => {
  227. let root = document.getElementById('root')
  228. let button = document.createElement('button')
  229. let formatted = false
  230.  
  231. button.innerHTML =
  232. '<button class="formatButton" type="button">格式化</button>'
  233. root.appendChild(button)
  234.  
  235. // const [formattedDom, dom] = run()
  236. read()
  237. run()
  238. button.onclick = () => {
  239. const hasClass = $('body')
  240. .toggleClass(controllerClass)
  241. .hasClass(controllerClass)
  242. localStorage.setItem(storageKey, +hasClass)
  243. }
  244. }
  245. document.onreadystatechange = function() {
  246. if (document.readyState == 'complete') {
  247. log('执行页面加载结束')
  248. _main()
  249. }
  250. }
  251. })()