如何用四个空格缩进选择文本

时间:2016-12-21 07:46:55

标签: jquery

当我选择多行文字或代码然后点击我的代码按钮

它应该通过四个空格缩进所有选定的代码,但由于某种原因只会缩进第一行

    demo
demo
demo

仅示例Codepen

  

问题:如何确保缩进所有选定的文字而不仅仅是   一行

$('.c').click(function() {
    wrapText("message", "   ", "");
});

完整脚本

function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

$('.b').click(function() {
    wrapText("message", "**", "**");
});

$('.i').click(function() {
    wrapText("message", "*", "*");
});

$('.c').click(function() {
    wrapText("message", "   ", "");
});

1 个答案:

答案 0 :(得分:3)

快速检查:Working JsFiddle

  

问题:如何确保它不仅仅在一行上缩进所有选定的文字

目前,当您对多行文本应用任何操作时,您只需添加额外的字符即可开始和结束选择。但是当谈到indent 时,您需要将其应用于每行的开头

所以我建议你将一个新参数传入你的函数,说明操作类型是indent。如果是,请使用正则表达式并将所有\n替换为\n + your indent space

代码更改如下。

function wrapText(elementID, openTag, closeTag,operationType) { //new parameter added
    // your current logic 
    var replacement;
    if(operationType === "indent"){
      var multiLineReplace = '\n'+openTag;
      replacement = openTag + selectedText.replace(/\n/g,multiLineReplace) + closeTag; //using regex to replace all instances of `\n` with `\n` + your indent spaces.
    }
    else{
       replacement = openTag + selectedText + closeTag;
    }

    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

您的脚本将更改为

$('.c').click(function() {
    wrapText("message", "   ", "","indent"); // pass in operationType
});