react-terminal-viewer
Version:
<h1 align="center"> react-terminal-viewer </h1>
155 lines (152 loc) • 7.17 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
/* eslint-disable no-plusplus */
import { DOMParser } from 'xmldom';
var DOCTYPE = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
var NODE_TYPE_TEXT = 3;
var Mark = /*#__PURE__*/function () {
function Mark(content) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
className: 'terminal-viewer-hl-mark',
markedClassName: 'terminal-viewer-hl-mark terminal-viewer-hl-marked'
};
_classCallCheck(this, Mark);
_defineProperty(this, "dom", void 0);
_defineProperty(this, "options", void 0);
_defineProperty(this, "matchCount", void 0);
_defineProperty(this, "matchedIndex", void 0);
_defineProperty(this, "isMarked", false);
_defineProperty(this, "hlIndex", void 0);
this.dom = new DOMParser().parseFromString("".concat(DOCTYPE, "<html><body>").concat(content, "</body></html>"), 'text/html');
this.options = options;
this.matchCount = 0;
this.matchedIndex = 0;
this.isMarked = false;
this.hlIndex = 0;
}
/**
* 根据关键字标记文本
* @param {String} keyword - 搜索关键词
* @param {Number} options.matchedIndex - 已匹配的最大的索引
* @param {Number} options.hlIndex - 需要标记的索引
* @returns this
*/
_createClass(Mark, [{
key: "mark",
value: function mark(keyword) {
var _this = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
matchedIndex: 0,
hlIndex: 0
};
var reg = new RegExp(this.escapeStr(keyword), 'gi');
var nodes = Array.from(this.dom.getElementsByTagName('body')[0].childNodes);
var len = keyword.length;
this.matchedIndex = options.matchedIndex;
this.hlIndex = options.hlIndex;
nodes.forEach(function (node) {
var allNodes = _this.getTextNodes(node);
allNodes.forEach(function (anode) {
var textNode = anode;
var text = textNode.textContent || '';
while (text) {
var start = text.search(reg);
if (start !== -1) {
var _textNode;
textNode = _this.wrapRangeInTextNode(textNode, start, start + len);
text = ((_textNode = textNode) === null || _textNode === void 0 ? void 0 : _textNode.textContent) || '';
_this.matchCount++;
_this.matchedIndex++;
} else {
break;
}
}
});
allNodes = [];
});
nodes = [];
return this;
}
// eslint-disable-next-line class-methods-use-this
}, {
key: "escapeStr",
value: function escapeStr(str) {
// eslint-disable-next-line no-useless-escape
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
}, {
key: "getStyle",
value: function getStyle(isMarked) {
var style = (isMarked ? this.options.markedStyle : this.options.style) || {};
return Object.keys(style).filter(function (key) {
return style[key];
}).map(function (key) {
return "".concat(key, ":").concat(style[key], ";");
}).join('');
}
// eslint-disable-next-line class-methods-use-this
}, {
key: "getTextNodes",
value: function getTextNodes(el) {
var nodes = [];
var queue = [el];
while (queue.length !== 0) {
var node = queue.shift();
if (node && node.nodeType === NODE_TYPE_TEXT) {
nodes.push(node);
}
if (node && node.hasChildNodes()) {
var childNodes = Array.from(node.childNodes);
childNodes.forEach(function (cnode) {
if (cnode.nodeType === NODE_TYPE_TEXT) {
nodes.push(cnode);
}
});
queue.push.apply(queue, childNodes);
}
}
return nodes;
}
}, {
key: "wrapRangeInTextNode",
value: function wrapRangeInTextNode(node, start, end) {
var _startNode$parentNode;
var _this$options = this.options,
className = _this$options.className,
markedClassName = _this$options.markedClassName;
var startNode = node.splitText(start);
var ret = startNode.splitText(end - start);
var repl = this.dom.createElement('mark');
var style = this.getStyle(this.matchedIndex === this.hlIndex);
if (this.matchedIndex === this.hlIndex) {
this.isMarked = true;
}
repl.setAttribute('class', (this.matchedIndex === this.hlIndex ? markedClassName : className) || '');
if (style) {
repl.setAttribute('style', style);
}
repl.textContent = startNode.textContent;
(_startNode$parentNode = startNode.parentNode) === null || _startNode$parentNode === void 0 ? void 0 : _startNode$parentNode.replaceChild(repl, startNode);
return ret;
}
}, {
key: "toString",
value: function toString() {
var innerHTML = this.dom.getElementsByTagName('body')[0].toString();
var match = innerHTML.match(/^<body xmlns="http:\/\/www\.w3\.org\/1999\/xhtml">(.[\s\S]*?)<\/body>$/);
return match && match[1] ? match[1] : '';
}
}, {
key: "distory",
value: function distory() {
this.dom = null;
}
}]);
return Mark;
}();
export default Mark;