Question

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

每次用户输入'＃'时我想突出显示该单词，在单词的末尾我想显示字母数。例如，“嗨，我的名字是＃user123（7），你的名字是什么？” 我已经有了突出的重点，但我目前迷失在字母计数部分。这是我的HTML

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

的Javascript

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/

提前谢谢！

P.S我不想使用任何插件或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方法查找表单值中的第一个匹配项＃。它的作用是在你检查的字符串中找到第一个'＃'，它返回它的位置。

E.G。

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);

您可以将此信息应用到您的论坛，方法是将var string替换为document.getElementById('inputidhere').value;，然后从那里开始！

古德勒克！希望这有助于你。

在第一次出现定义的子字符串后查找字符串的长度

3 个答案: