0

所以，我在 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;
}

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

先感谢您！

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

4

3 回答 3

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）你想要第二个捕获组的长度，这使得它更轻松。

于 2013-09-29T15:57:44.333 回答
0 
<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");
于 2013-09-29T15:58:09.033 回答
0

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

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

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

于 2013-09-29T16:13:38.293 回答