Question

我有这个：

var editor = document.getElementById('editor');
var words = document.querySelector('.words');

function wordsCount() {
	var arr = editor.textContent.trim().replace(/\s+/g, ' ').split(' ');
	words.textContent = !arr[0] ? 0 : arr.length;
}

editor.addEventListener('input', wordsCount);
wordsCount();

body {
	width: max-content;
	font-family: 'Helvetica';
}
		
section {
	outline: 2px solid #BFDEFF;
}
		
aside {
	background-color: silver;
}

<section id="editor" contenteditable="true">Default text</section>
<aside class="words"></aside>

问题是脚本在回车后忽略了单词。所以，如果我输入，

Example
Example
Example

它只计算一个单词而不是三个单词。有帮助吗？

Answer 1

开始时没有换行符。让我们看看当你输入这三行时会发生什么：

Example
Example
Example

编辑元素的HTML现在看起来如下：

<section id="editor" contenteditable="true">Example<div>Example</div><div>Example</div></section>

而不是换行符，新行由<div>元素包裹。

现在，访问editor.textContent会返回所有子节点的textContent属性值的串联。因此，它返回ExampleExampleExample。

要解决您的问题，您可以将editor.textContent替换为editor.innerText，或者只使用<textarea>代替。

＆＃13;

const editor = document.getElementById('editor');
const output = document.getElementById('counter');

editor.addEventListener('input', event => {
  output.textContent = (editor.value.match(/\S+/g) || []).length;
});

＆＃13;

<textarea id='editor'></textarea>
<output id='counter'></output>

＆＃13;

Answer 2

试试这个，

function wordsCount() {
    var arr = editor.innerText.trim().match(/\S+/g); //use innerText instead
    words.textContent = !arr[0] ? 0 : arr.length;
}

回车后忽略单词的字计数器

2 个答案: