在首次出现已定义的子字符串之后，找到字符串的长度

Question

所以，我在html中有这个textarea，我正在尝试实现类似twitter的东西。

每次用户键入“＃”时，我要突出显示单词，并在单词末尾显示字母计数。 例如，“您好，我叫＃user123（7），您叫什么名字？” 我已经做好了突出显示的工作，但是我现在在信件计数部分迷失了。 这是我的HTML

<div id="inputback" class="format"></div>
<textarea id="input" class="format"></textarea>

Java脚本

var textarea = document.getElementById("input");
var hashflag = 0 ;
var textlength;

textarea.onkeydown = function(e){
  textarea.style.height = "";
  textarea.style.height = textarea.scrollHeight + "px";
  textlength = textarea.value.length;

  var str = textarea.value;
  str = str.replace(/(\s)([#]\w*)/g, "$1<b>$2</b>");
  $('#inputback').html(str); 
} 

这是我的CSS

    .format
{
    font: 9pt Consolas;

}

#input { border: 1px solid black; background: transparent; z-index: 10; }

#inputback {

    color: transparent;
    position: absolute;
    top: 0px
}
#inputback b
{
    color: black;
    background-color: #808080;
    font-weight: normal;
}

这是我所完成的工作。 http://jsfiddle.net/gjqWy/115/

先感谢您！

PS我不想使用任何插件或jQuery的。 只是普通的Javascript / html / css

Answer 1

.replace也可以将函数作为第二个参数：

str = str.replace(/(^|\s)#(\w+)/g,function(_,a,b) {
    // _ represents the full match - we don't need it here
    // a is the first subpattern
    // b is the second subpattern
    return a+"<b>#"+b+"</b>("+b.length+")";
});

我对您的正则表达式做了一些调整。 现在，即使哈希位于字符串的开头，它也可以工作，而且我将哈希从捕获的组中取出，例如a）它是常量，并且b）您想要第二个捕获组的长度，因此更轻松。

Answer 2

<form id="testForm">
  <input id="A1" type="text"></input>
  <div id="vsA1" class="inputTextSummery">charaters reamining: 40</div>
  </form>
  <script type="text/javascript">
     function wordCount(_input, _limit, _summary)
     {
       var limit = _limit; //set limit of charater
         var inputDiv = "#"+_input;  //inout div id
         var displayDiv = "#"+_summary; //display summary div id
       var currentWordCount = 0;  //defualt current charater count
       $(inputDiv).keyup(function(){   //
             currentWordCount = $(inputDiv).val().length;
             var charLeft = limit - currentWordCount;
             if(charLeft >= 0){
              $(displayDiv).html("charaters reamining: "+ (limit - currentWordCount));
             }else{
              $(displayDiv).html("Input has exceed limit!");     
             }
        });     
     }
     wordCount("A1", 40, "vsA1");

Answer 3

使用JavaScript .indexOf方法在表单值中查找第一个出现的＃。 它所做的是在您要检查的字符串中找到“＃”的第一个匹配项，并返回它的位置。

例如

var string = "This is stackoverflow";
var start = string.indexOf('is'); //Will return as 5

得到排序后，您将需要执行所有操作以获取其后的值。 像这样

var string = "This is stackoverflow";
var start = string.indexOf('is') + 2; //7 (You add 2 because its a 2 letter word)
var end = string.length; //20
var newstring = string.substr(start, end);

您可以通过使用document.getElementById('inputidhere').value;替换var字符串来获取此信息并将其应用于您的论坛document.getElementById('inputidhere').value; 然后从那里走！

祝好运！ 希望这对您有所帮助。