Question

我有一个textArea，将在其中键入文本，并且在键入文本时，对于每个键入的字符，计数器将减少1。但是我想在textArea中键入登录链接时，计数器将减少恰好是16，然后再次输入普通文本时，每个字符将减1 ....任何形式的帮助将不胜感激

TextArea

var maxLimit = 160;
$(document).ready(function(e) {
	$('#msgArea').keyup(function() {
		var lengthCount = this.value.length;
		if (lengthCount > maxLimit) {
			this.value = this.value.substring(0, maxLimit);
			var charactersLeft = maxLimit - lengthCount + 1;
			$('#msgArea').css('background-color', '#FFFF00');
		} else {
			var charactersLeft;
			var textmsg = document.getElementById('msgArea').value;
			var pattern = new RegExp(
				'((http|https)(://))?([a-zA-Z0-9]+[.]{1}){2}[a-zA-z0-9]+(/{1}[a-zA-Z0-9]+)*/?',
				'i'
			);
			if (pattern.test(textmsg)) {
				lengthCount = lengthCount - 16;
				charactersLeft = maxLimit - lengthCount;
			} else {
				charactersLeft = maxLimit - lengthCount;
				$('#spnCharLeft').text(charactersLeft + ' Characters left');
			}
		}
		$('#spnCharLeft').css('display', 'block');
		if (lengthCount < maxLimit) {
			$('#msgArea').css('background-color', '#fff');
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-offset-2 col-sm-10">
  <label>Message</label>
  <textarea id="msgArea" class="form-control" rows="3"></textarea>
  <span id="spnCharLeft"></span>
</div>

Answer 1

var maxLimit = 160;
$(document).ready(function(e) {
  $('#msgArea').keyup(function() {
    var spanCharLeft = $('#spnCharLeft');
    var charactersLeft;
    var textmsg = this.value;
    var lengthCount = textmsg.length;
    var pattern = new RegExp(
      '((http|https)(://))?([a-zA-Z0-9]+[.]{1}){2}[a-zA-z0-9]+(/{1}[a-zA-Z0-9]+)*/?',
      'ig'
    );
    var matches = textmsg.match(pattern);
    if (!matches) {
      matches = [];
    }
    matches.forEach(matched_string => {
      lengthCount = lengthCount - matched_string.length + 16;
    });

    charactersLeft = maxLimit - lengthCount;
    spanCharLeft.text(charactersLeft + ' Characters left');
    if (lengthCount < maxLimit) {
      $('#msgArea').css('background-color', '#fff');
    } else {
    	this.value = this.value.substring(0, maxLimit);
      spanCharLeft.text('0' + ' Characters left');
      $('#msgArea').css('background-color', '#fff000');
    }

    $('#msgArea').css('display', 'block');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-offset-2 col-sm-10">
  <label>Message</label>
  <textarea id="msgArea" class="form-control" rows="3"></textarea>
  <span id="spnCharLeft"></span>
</div>

这应该做到。记下matches = textmsg.match(pattern)的使用。您需要为模式的每个匹配项解析字符串，然后适当地增加lengthCount lengthCount = lengthCount - matched_string.length + 16。另外请注意，我已将正则表达式更改为使用g全局标志。

PS：我意识到这部分很丑

if(!matches) {
    matches = [];
}

我希望对此进行编辑

在TextArea中键入超链接时，递减javascript中的计数器

1 个答案: