javascript - 如何检查相邻字符是什么？

Question

我正在创建一个 Markdown 编辑器，我需要检查相邻字符是否是特定字符，然后删除它们，否则附加它们。

例如，我想检查所选文本，两个相邻字符是 **，然后删除它们，否则将它们附加到所选文本周围。

<小时/>

我可以使用这种方法获取选定的文本:

function getSelection(elem) {
    var selectedText;

    if (document.selection != undefined) { // IE
        elem.focus();
        var sel = document.selection.createRange();
        selectedText = sel.text;
    } else if (elem.selectionStart != undefined) { // Firefox
        var startPos = elem.selectionStart;
        var endPos   = elem.selectionEnd;
        selectedText = elem.value.substring(startPos, endPos)
    }
    return selectedText;
}

$(document).on('mousedown', 'button', function(e) {
  var selection =  getSelection( $('#txtarea').get(0) );
  alert(selection);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtarea">this is a test</textarea>
<button>Bold (toggle)</button>

现在我需要当用户单击该按钮时，它会检查所选文本是否在 ** 之间，就像这样 **selectedtext** 一样，然后像这样删除它们selectedtext 否则附加它们就像这样**selectedtext**。我怎样才能做到这一点？

Answer 1

首先，我想引用一下所有的 Markdown 编辑器:https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=javascript%20markdown%20library

所以:不要尝试重新发明轮子，等等。

但是为了学习，我的方法如下:

function toggleMarker(marker, el) {
var markerLength = marker.length;
var startPos, endPos, selection, range;

if (document.selection != undefined) { // IE
    el.focus();
    range = document.selection.createRange();
    selection = range.text;
} else if (el.selectionStart != undefined) { // Firefox
    startPos = el.selectionStart;
    endPos   = el.selectionEnd;
    selection = el.value.substring(startPos, endPos);
}

if (!selection.length){
        return;
}



if (el.value.substring(startPos-markerLength,startPos) === marker
        && el.value.substring(endPos,endPos+markerLength) === marker
){
        el.value = el.value.substring(0,startPos-markerLength) +
                            selection + 
              el.value.substring(endPos+markerLength);
}
else{
        el.value = el.value.substring(0,startPos) + marker + 
                            selection + marker + el.value.substring(endPos);
}

}

$(document).on('mousedown', 'button', function(e) {
  toggleMarker( $(this).data('marker'), $('#txtarea').get(0) ).text;
});

查看实际效果:https://jsfiddle.net/t4ro53v8/4/

该解决方案采用了一种非常通用的方法:要切换的标记被设置为自定义数据属性，以便轻松重用代码。

该功能仅针对非 IE 情况实现。您必须检查如何确定 IE 中某个范围的 startPos 和 endPos。

在所有其他浏览器中:

1. 选择已确定
2. 如果未选择任何内容，则不会执行任何操作
3. 根据给定标记检查选择的环境
4. 如果两个标记都存在，则会被删除
5. 否则将插入标记

作为概念证明，这个示例非常有效。 但也存在一些不足:

• 如何区分粗体(**)和斜体(*)？
• 如何处理仅出现在所选内容一侧的标记
• 如果选择了标记该怎么办？

但这就是你现在要解决的......