Найти длину строки после первого вхождения определенной подстроки

Question

Итак, у меня есть это textarea в html, и я пытаюсь реализовать что-то вроде 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/

Заранее спасибо!

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+")"; 
}); 

Я настроил свой регулярное выражение немного. Теперь он будет работать, даже если хэш находится в начале строки, а также я взял хэш из захваченной группы, потому что а) он постоянный, и б) вы хотите длину второй группы захвата, и это делает ее Полегче.

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

Вы можете взять эту информацию и применить его на форуме, заменив уаг строку с document.getElementById('inputidhere').value; И затем оттуда!

Goodluck! Надеюсь, это помогло вам.