如何检查相邻字符是什么? [英] How to check what are adjacent characters?

问题描述

我正在创建降价编辑器，我需要检查邻居字符是否为特定字符，然后将其删除，否则添加它们.

例如，我要检查选定的文本，两个相邻字符为**，然后将其删除，否则将其附加在选定的文本周围.

---

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

 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**，然后将其删除，例如selected text，否则将其添加到此**selectedtext**.我该怎么办?

解决方案

在此之前，我想先参考一下所有的降价编辑器: https://jsfiddle.net/t4ro53v8/4/

该解决方案采用了一种非常通用的方法:将要切换的标记设置为自定义数据属性，以使其易于重用代码.

该功能仅在非IE情况下实现.您将需要检查如何确定IE中某个范围的startPos和endPos.

在所有其他浏览器中:

1. 已识别选择
2. 如果未选择任何内容，则什么也不做
3. 根据给定的标记检查所选内容的周围情况
4. 如果同时存在两个标记，则会将它们删除
5. 否则将插入标记

作为概念证明，此示例就像一个吊饰一样工作. 但是有一些缺点:

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

但这是您现在要解决的...

I'm creating a markdown editor and I need to check if neighbor characters are specific characters, then remove them, else append them.

For e.g I want to check selected-text, tow neighbor characters are **, then remove them, else append them around selected text.

---

I can get selected text using this approach:

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>

Now I need when user clicks on that button, it checks if selected text is between ** like this **selectedtext**, then remove them like this selected text else append them like this **selectedtext**. How can I do that?

解决方案

Before anything I would like to refer to all the markdown editors out there: https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=javascript%20markdown%20library

So: do not try to reinvent the the wheel, and so on.

But for the sake of learning, my approach would look like this:

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

See it in action: https://jsfiddle.net/t4ro53v8/4/

The solution takes a very generic approach: the marker to toggle is set as a custom data attribute to make it easy to reuse the code.

The functionality is only implemented for the non-IE case. You will have to check, how to determine startPos and endPos for a range in IE.

In all other browsers:

1. the selection is identified
2. nothing is done if nothing is selected
3. sourroundings of the selection are checked against the given marker
4. if both markers are present, they get deleted
5. otherwise the markers are inserted

As a proof of concept this example works like a charm. But there are some shortcomings:

• How to distinguish between bold text(**) and italics(*)?
• How to handle markers that just appear just on one side of the selection
• What to do, if a marker is selected?

But that is for you to solve now ...

这篇关于如何检查相邻字符是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！