通用评论

helper.js 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import {
  2. REGEXP,
  3. IMAGE_SPLIT,
  4. IMAGE_PROCESS_SMALL,
  5. IMAGE_PROCESS_LARGE,
  6. IMAGE_PROCESS
  7. } from "./constant";
  8. import emoji, { prefixUrl } from "./emoji";
  9. const emojiObejct = arrayToObject(emoji, "title");
  10. export function isFunction(functionToCheck) {
  11. return (
  12. functionToCheck && {}.toString.call(functionToCheck) === "[object Function]"
  13. );
  14. }
  15. export function isUrl(userInput) {
  16. // 需完整匹配
  17. const regexp = /^((http(s)?:)?\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
  18. var res = userInput.match(regexp);
  19. if (res === null) return false;
  20. else return true;
  21. }
  22. /**
  23. * 将对象数组转换为对象
  24. * @param {array} array Array of Objects
  25. * @param {string} keyField string
  26. */
  27. export function arrayToObject(array, keyField) {
  28. return array.reduce((obj, item) => {
  29. obj[item[keyField]] = item;
  30. return obj;
  31. }, {});
  32. }
  33. /**
  34. * HTML 编码
  35. * 将 < > 等字符串进行编码
  36. * @param {string} str 文本
  37. */
  38. export function htmlEncode(str) {
  39. if (!str) return "";
  40. return str.replace(/[<>]/gim, function(i) {
  41. return "&#" + i.charCodeAt(0) + ";";
  42. });
  43. }
  44. /**
  45. * 渲染编辑器
  46. * [x] => <img src="x" />
  47. * @param {strig} content
  48. */
  49. export function renderContent(content, onClick) {
  50. let newContent = content;
  51. if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
  52. newContent = newContent.split(IMAGE_SPLIT);
  53. newContent.pop();
  54. newContent = newContent.join("");
  55. }
  56. // 不包含在标签内的链接
  57. const innerUrl = /((http(s)?:)?\/\/)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)(?![^<>]*>|[^"]*?<\/a)/g;
  58. const data = htmlEncode(newContent)
  59. .replace(REGEXP, function(a, b) {
  60. const src = a.slice(1, -1);
  61. // 兼容旧的评
  62. // 因为旧的评论用 [img url] 方式存储的
  63. if (isUrl(src)) {
  64. return `<a href="${src}" rel="noopener noreferrer" target="_blank"><img class="comment-img" src="${src}" alt="${src}" /></a>`;
  65. }
  66. // 如果不存在对应的表情, 则返回原文
  67. const emoji = emojiObejct[src];
  68. if (emoji) {
  69. return `<img class="comment-emoji" src="${prefixUrl}${emoji.value}.${
  70. emoji.ext
  71. }" alt="${emoji.title}" />`;
  72. }
  73. return `[${src}]`;
  74. })
  75. .replace(innerUrl, function(a, b) {
  76. const protocol = /^(https?:)?\/\//;
  77. const hasProtocol = protocol.test(a);
  78. const url = hasProtocol ? a : `//${a}`;
  79. // target="_blank" 存在安全性问题
  80. // return `<a href="${url}" target="_blank" rel="noopener noreferrer" >${a}</a>`;
  81. return `<a href="${url}">${a}</a>`;
  82. })
  83. .replace(/\n/g, "<br />");
  84. return data;
  85. }
  86. export function addImageProcess(url, options = {}) {
  87. if (options.small) {
  88. return url + IMAGE_PROCESS_SMALL;
  89. }
  90. if (options.large) {
  91. return url + IMAGE_PROCESS_LARGE;
  92. }
  93. return url + IMAGE_PROCESS;
  94. }