Question

我尝试在为一个句子输入一定数量的单词后动态更改字体的颜色。因此，在一个句子中输入两个单词后，字体将变为蓝色，但仅适用于该句子。放置一段时间之后，如果有意义的话，函数会重置，所以如果我要做一个五个字的句子，那么它将是红色而不是蓝色。

我也无法计算单词的数量，因为我的浏览器说.split不是控制台中的函数。

function Music() {


    var result = document.getElementById('text').value.match( /[^.!?]+[.!?]+/g );

    var resultSpace = (result.split(" "));

    var resultEl = document.querySelector('text');

    console.log(result.length);

    var spaceCounter = 
    alert(result.length);


    if (resultSpace < 2){

        resultEl.style.color = "blue";


    }

    else {

    }
}

Answer 1

比看起来更复杂。你必须首先通过标点符号来分割内容（它在＆＃34之前错过反斜杠;？＆＃34;在正则表达式中），然后，对于每个句子，通过单词。最后，您必须为每个句子创建不同的html样式元素：

HTML：

<div id="text">Hello everybody ! Stack Overflow is so nice. Don't you think ?</div>
<div id="target"></div>

CSS：

.short {
    color: blue;
}
.long {
    color: red;
}

JS：

function Music() {

    var result = document.getElementById('text').innerText;
    var sentences = result.match( /[^\.!\?]+[\.!\?]+/g );
    var newContent = [];     

    for (var i = 0; i < sentences.length; i++) {

       var textClass = '';
       wordsNbr = sentences[i].split(' ').length;
       if ((wordsNbr - 1) < 4) { 
           textClass= 'short';
       }
       else {
           textClass= 'long';
       }
       newContent.push( { 'class': textClass, 'sentence': sentences[i] } );
    }
    return newContent;
}

var result = Music();
var target = document.getElementById('target');

result.forEach( function(sentence) {
    var newSpan = document.createElement('span');
    newSpan.classList.add(sentence.class);
    var newText = document.createTextNode(sentence.sentence);
    newSpan.appendChild(newText);
    target.appendChild(newSpan);
});

<强> https://jsfiddle.net/jb937h2v/7/

试图动态改变颜色

1 个答案: