jQuery-生信-输入氨基酸序列失焦后自动分组并进行过滤

实现效果

假设我有一个输入框需要用户输入氨基酸序列（可能是大小写混合的字符串），当用户点击别的地方时，该输入框内的序列会自动转换成大写并过滤掉非法字符，并且在每一行前面增加数字编号。

就像下面这样，第一个非法字符b被去除，剩下的小写字母都转为了大写字母。

实现方法

思路：为<textarea>的失焦事件（失焦事件 blur 发生在元素从被聚焦状态转变为非聚焦状态时，例如用户从一个输入框切换到另一个控件，那么原来的输入框就会触发一个 blur 事件）编写处理方法，即过滤非法字符和分组。如果仍需要使用这段序列，那么可以为提交按钮绑定一个自定义的属性，用这个属性“携带”序列。

代码

<!-- input form -->
<div class="row">
	<textarea rows="10" cols="100" required="required" name="sequence" id="input-sequence"
placeholder="可输入20种氨基酸构成的序列，用X表示未知氨基酸" style="text-indent: 0;font-family: monospace;"></textarea>
</div>
<div class="row">
	<!-- 提交按钮 -->
	<input type="button" value="预测" class="btn btn-primary" id="input-design-submit" />
</div>
...

<script>
function groupString(str, nperg, gperline) {
    // str: sequence
    // nperg: 每组有多少个字符
    // gperline：每行有几组
    var result = '';
    // 计算总共有多少组
    var groups = Math.ceil(str.length / nperg); 
	var linesize = nperg * gperline;
    for (var i = 0; i < groups; i++) {
        var startIndex = i * nperg;
        var endIndex = Math.min(startIndex + nperg, str.length); // 结束索引不能超过字符串长度
        var groupStr = str.substring(startIndex, endIndex); // 截取每组字符串
        if (i % gperline == 0) { // 左侧需要填数字
			result += String(i * nperg + 1).padStart(6, ' ') + ' ';
		}
		// 每组添加字符串和空格
		result += groupStr + ' ';
		if ((i + 1) % gperline === 0) { // 换行
            result += '\n';
        }
    }
    return result;
}

$("#input-sequence").blur(function () {
    var tmpSeq;
    // 过滤非法字符再转大写
    tmpSeq = $(this).val().replace(/[^ACDEFGHIKLMNPQRSTVWYX]+/ig, "").toUpperCase();
    // 用data-seq属性带处理后的序列
    $("#input-design-submit").attr('data-seq', tmpSeq);
    // 10个1组每行6组
    $(this).val(groupString(tmpSeq, 10, 6))
});

</script>