问题

Question

我正在尝试制作一个文本编辑器，该文本编辑器根据以下符号设置文本格式：

*-粗体
_-斜体
`-Code
#-标记

非常类似于您在此处看到的格式。

基本上，我想制作一个类似于SO帖子中的文本格式化程序。

// REGULAR EXPRESSIONS
let boldRegExp = { re: /\*(?=.+\*)/g, markup: 'b', symbol: '*' },
	italicRegExp = { re: /\_(?=.+\_)/g, markup: 'i', symbol: '_' },
	codeRegExp = { re: /\`(?=.+\`)/gm, markup: 'c', symbol: '`' },
	tagRegExp = { re: /\#(?=.+\#)/g, markup: 't', symbol: '#' };

// ELEMENTS
let inputArea = document.querySelector('#input'),
	outputDiv = document.querySelector('#output'),
	resultText = undefined;

// RECURSION
let formatText = (text, style, index = text.search(style.re)) => {
	let str = text,
		strArr = str.split('');

	if(index >= 0 && str.lastIndexOf(style.symbol) !== index) {
		strArr.splice(str.search(style.re), 1, `<${ style.markup }>`);
		strArr[str.search(style.re)] = `</${ style.markup }>`;

		return formatText(strArr.join(''));
	} else {
		return text;
	}
};

// KEYUP EVENT HANDLER
inputArea.addEventListener('keyup', () => {
	resultText = formatText(inputArea.value, boldRegExp);
	resultText = formatText(inputArea.value, italicRegExp);
	resultText = formatText(inputArea.value, codeRegExp);
	resultText = formatText(inputArea.value, tagRegExp);
  
	outputDiv.innerText = resultText;
});

* {
	box-sizing: border-box;
}
body {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-content: space-around;
	align-items: center;
}
#input, #output {
	width: 44vw;
	margin: 3vw;
	padding: 7px 12px;
	border-radius: 6px;
}
#input {
	border: 0.5px solid black;
	font: 400 20pt consolas;
	outline: none;
}
#output {
	box-shadow: 0px 3px 7px 3px #EEE;
	font: 400 20pt Lato;
}
b {
	font-weight: 900;
}
i {
	font-style: italic;
}
c {
	font-family: monospace;
	background: gray;
}
t {
	background: #28F;
	border-radius: 2px;
	padding: 2px 4px;
	display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<textarea id='input' placeholder="Enter your question"></textarea>
	<div id='output'></div>

	<script type="text/javascript" src='./script.js'></script>
</body>
</html>

JavaScript

// REGULAR EXPRESSIONS
let boldRegExp = { re: /\*(?=.+\*)/g, markup: 'b', symbol: '*' },
    italicRegExp = { re: /\_(?=.+\_)/g, markup: 'i', symbol: '_' },
    codeRegExp = { re: /\`(?=.+\`)/gm, markup: 'c', symbol: '`' },
    tagRegExp = { re: /\#(?=.+\#)/g, markup: 't', symbol: '#' };

// ELEMENTS
let inputArea = document.querySelector('#input'),
    outputDiv = document.querySelector('#output'),
    resultText = undefined;

// RECURSION
let formatText = (text, style, index = text.search(style.re)) => {
    let str = text,
        strArr = text.split('');

    if(index >= 0 && str.lastIndexOf(style.symbol) !== index) {
        strArr.splice(str.search(style.re), 1, `<${ style.markup }>`);
        strArr[str.search(style.re)] = `</${ style.markup }>`;

        return formatText(strArr.join(''));
    } else {
        return text;
    }
};

// KEYUP EVENT HANDLER
inputArea.addEventListener('keyup', () => {
    resultText = formatText(inputArea.value, boldRegExp);
    resultText = formatText(inputArea.value, italicRegExp);
    resultText = formatText(inputArea.value, codeRegExp);
    resultText = formatText(inputArea.value, tagRegExp);

    outputDiv.innerText = resultText;
});

问题

在输入纯文本之前，一切正常。但是，当我完成标记时，例如：

*b*

  ^ at this *. It gives the following error.

错误：无法在以下位置读取re的属性undefined：

错误行：let formatText = (text, style, index = text.search(style.re)) => {

而且，当我检查调试器时，它说style未定义。

style一直定义到我写纯文本为止，但是当我完成一个标记时，它将引发错误。为什么会这样呢？而且，我该如何解决呢？

Answer 1

在递归调用return formatText(strArr.join(''));中，您没有指定样式，因此它是未定义的。因此，它将在style is undefined上引发text.search(style.re)错误。

在formatText函数中未定义参数“样式”吗？

问题

1 个答案: