jquery - 如何将选择的文本缩进四个空格

Question

当我选择多行文本或代码，然后单击我的代码按钮时

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

    demo
demo
demo

仅作为示例 Codepen

Question: How can I make sure it indents all selected text not just on the one line

$('.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", "   ", "");
});

Answer 1

快速检查:Working JsFiddle

Question: How can I make sure it indents all selected text not just on the one line

目前，当您对多行文本应用任何操作时，您只是在选择的开始和结束处添加额外的字符。但是，当涉及到缩进时，您需要将其应用到每行的开头。

因此，我建议您向函数中传递一个新参数，说明操作类型是否为缩进。如果是这样，则使用正则表达式并将所有出现的 \n 替换为 \n + 您的缩进空间。

代码更改如下。

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