代码之家 › 专栏 › 技术社区 › vrintle Jake

formatText函数中未定义参数“style”?

recursion regex javascript

vrintle Jake · 技术社区 · 6 年前

我正在尝试制作一个文本编辑器,它根据以下符号格式化文本:

* - 粗体
_ - 斜体
` 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>

// 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 未定义。

风格 在我写纯文本之前定义,但是当我它引起错误的标记。为什么会这样?我该怎么解决呢?

1 回复 | 直到 6 年前

lenilsondc 6 年前

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