如何根据限制更改前一些字符的颜色并将其他字符保留在 div 中

Posted 2023-03-05

【中文标题】如何根据限制更改前一些字符的颜色并将其他字符保留在 div 中

【英文标题】：how to change color of first some characters based on limit and leave others as it is inside div

【发布时间】：2015-09-19 23:20:27

【问题描述】：

我想要做的是我有两个 div。一个用于编写内容，第二个用于显示限制。当我在第一个 div 中写任何单词时，第二个 div 计数减一。现在当计数为0 时，我希望第一个 div 中的所有单词的背景颜色为红色，当我写下一个单词时，这将是正常的，没有任何背景

到目前为止我尝试了什么：-

 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div contenteditable="true" class="jqte_editor" id= "content"></div><br />
        <div class="pin_words">
            <span id="word_count_line"><span id="more_words">10</span> more category for <span id="points">adding</span>category</span>
            <input type="hidden" id="pin_word_limit" value="10">
            <input type="hidden" id="pin_points" value="20">
        </div>


<style>
.jqte_editor 
    border: 2px solid green;
    float: left;
    height: 100px;
    width: 100%;

</style>
<script type = "text/javascript">
function wordTracker(selector, pin_words)
        $this1 = $(selector);
        var value = $this1.text();
        //console.log("==>"+(value.length)+"<==");
        var wordLimit = parseInt($(pin_words+" > #pin_word_limit").val());
        var points = $(pin_words+" > #pin_points").val();
        if(value=="") $(pin_words+" > #word_count_line > #more_words").text(wordLimit);
        var wordCount = value.trim().split(' ').length;
        var tbwWords = wordLimit - wordCount;
        if(tbwWords > 0) 
            $(pin_words+" > #word_count_line").html('<span id="more_words">'+tbwWords+'</span> more words for '+points+' points</span>').css('font-weight', 'normal');
        else 
            $(pin_words+" > #word_count_line").text(points+' Points').css('font-weight', 'bold'); 

        if(value.length == 0) $(pin_words+" > #word_count_line").html('<span id="more_words">'+wordLimit+'</span> more words for '+points+' points</span>').css('font-weight', 'normal');

        if(tbwWords == 0)
            var search1 = $('.jqte_editor').text();
            //var regex = new RegExp(search1,'gi');
            $(".jqte_editor").html($(".jqte_editor").text().replace(search1, "<span style ='background-color:red'>"+search1+"</span>"));
            setEndOfContenteditable(document.getElementById('content'));
       
    

    $(document).ready(function()
        $('.jqte_editor').keyup(function()
            wordTracker(this, '.pin_words');
        );
    );

    function setEndOfContenteditable(contentEditableElement)
    
        var range,selection;

        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
            console.log(range);
            console.log(selection);
        
        else if(document.selection)//IE 8 and lower
         
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        
    
</script>

注意：当限制结束时，代码在 95% 左右会改变颜色。但是之后我需要同时按空格+任何字符，然后只有下一个没有颜色。

如果你复制整个代码并运行，你可以很容易地理解我的问题。

【问题讨论】：

在 JSFIDDLE 上处理它，2 分钟

但是请在最后检查一下我的代码，以便您了解我真正想做的事情以及我的问题。

我没有添加这个答案，因为它还没有工作，我打算上班！看看这个人。只需要弄清楚为什么光标一直在移动而我们是金色的。我稍后会回到这个问题，但同时它可能会给你一些想法 - jsfiddle.net/Panomosh/1xqbLns5

显然，将 span 标签附加到每个字符是非常糟糕的，但你知道这一点。将有一种方法可以在 x 数量的字符之后拆分字符串，并且只附加一次 span 标签，但就像我说的那样。我是来工作的，哈哈

这就是为什么我说运行我的代码并得到确切的问题。您的代码中也存在同样的问题。

【参考方案1】：

只要有单个空格，我的方法就有效..恕我直言，这不好..

但是这里...

https://jsfiddle.net/cbc1b9ka/

var limit = 5;
var remaining = $('.remaining').text(limit);
var overlay = $('.overlay');
var input = $('input');

overlay.height(input.height());


input.on('input',function()
    var text = $(this).val();
    overlay.text(text);
    var words = text.match(/\b[^\s]+\b/gi);
    if (words.length>limit) 
        var first = words.splice(0,limit);
        var ele1 = $('<span class="redbg">').text(first.join(' '));
        var ele2 = $('<span>').text(" "+words.join(' '));
        overlay.html('');
        overlay.append(ele1).append(ele2);
    

);

【参考方案2】：

我为您的查询创建了一个小提琴。我希望这能解决您的问题。

$('textarea').on('input', function() 
  var word = 0,
    lastLetter;

  $('#output > span').text('');
  this.value.split('').forEach(function(letter, i) 
    if (letter === ' ' && lastLetter !== ' ') word++;
    lastLetter = letter;
    if (word < 5) 
      $('#output span:first').append(letter);
     else 
      $('#output span:last').append(letter);
    
  );
);

$('textarea').focus();

textarea,
#output 
  width: 500px;
  height: 10em;
  padding: 0.2em;
  margin: 0.2em;
  box-sizing: border-box;
  font: 13px arial;
  border: 1px solid silver;
  white-space: pre-wrap;

textarea 
  -webkit-text-fill-color: transparent;
  overflow: auto;

#output 
  position: absolute;
  pointer-events: none;
  z-index: 1;

#output span:first-of-type 
  color: green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"><span></span><span></span></div>
<textarea></textarea>

【参考方案3】：

如果我理解你的问题，你想用红色涂上红色，只有前 10 个单词。

我用这个小jQuery/jssn-p来数前10个字：

var firstTenWords = string.split(' ').slice(0,9).join(' ');

然后在红色的<span> 中包含新变量firstTenWords，而不是string1。

我在您发布的脚本的 第 19 行之后进行了此更改：

var firstTenWords = search1.split(' ').slice(0,9).join(' ');
$(".jqte_editor").html($(".jqte_editor").text().replace(firstTenWords, "<span style ='background-color:red'>"+firstTenWords+"</span>"));

//Continues with your code: setEndOfContenteditable(document.getElementById('content'));
//And so on...

这是使用您的代码和我的更改所做的工作小提琴：https://jsfiddle.net/jfdwrdfx/2/

【讨论】：

没关系，但问题是如果他写了 11 个单词，然后他又回到红色字符中间写一个新单词，那么你的代码就会失败。无论如何，感谢您的尝试。如果您可以根据我的情况进行更改，那将是最好的。我过去 5 个小时都在做，现在累了。

对不起，我没注意到，我正在修复它。

当然，请更改它。如果你这样做，真的很可观。我的 jquery 不太好。谢谢。

您能在您的项目中添加一个按钮吗？因为您的代码无法使用if (tbwWords == 0) 语句，您应该使用<= 运算符而不是==。但是以这种方式 this 发生了。 每次你松开一个键，光标就会回到文本的末尾。如果有一个按钮，结果会是this，不是很好，但它可以工作.或者，通过按enter 键，the result 会比使用按钮更好

哦，重要的是你已经解决了！但我想看看如何。如果您愿意，并且您认为这有帮助，您仍然可以将答案标记为已接受。谢谢你，很抱歉迟到的答案;)