javascript - 轻松替换值中多行的字符串

Question

编织:https://mikethedj4.github.io/kodeWeave/editor/#98f122f9b4f7b8f1ae0c945d3087f580

我正在使用如下代码，但它重复了多次。

基本上我想把这个....

selected_text = editor.getSelection();  // Need to grab the Active Selection

editor.replaceSelection("<" + selected_text + ">");
editor.focus();

为此....

selected_text = editor.getSelection();  // Need to grab the Active Selection

editor.replaceSelection("<" + selected_text + ">").focus();

是否有转换器可以为我做这件事？

我尝试使用....

preview.val( this.value.replace(/;\n            editor.focus();/g,".focus();") )

但它不起作用，控制台也没有告诉我任何信息 :(

$(document).ready(function() {
  var editor  = $(".editor"),
      preview = $(".preview");
  
  // Remove new line and insert new line showing the text in value
  editor.keyup(function() {
    preview.val( this.value.replace(/;\n        htmlEditor.focus();/g,".focus();") )
  }).click(function() {
    this.select()
  })
  
  // Easily Select Converted Code
  preview.click(function() {
    this.select()
  })
  
    preview.val( editor.val().replace(/;\n        htmlEditor.focus();/g,".focus();") )
})

body {
  margin: 0;
  background: #333;
}

.editor, .preview {
  position: absolute;
  width: 50vw;
  height: 100vh;
  padding: 1em;
  border: 0;
  border-radius: 0;
  resize: none;
}

.editor {
  left: 0;
  color: #0b0;
  background-color: #000;
}

.preview {
  right: 0;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea class="editor" placeholder="Code with multiple lines here...">            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();</textarea>
<textarea class="preview" placeholder="Generated result here..."></textarea>

Answer 1

您需要转义括号:htmlEditor.focus\(\);。我还建议 \s* 而不是带有一堆空格的 \n ，但这取决于你。只需确保使用正确数量的空格(12 个，而不是 8 个，对于您给出的示例)，或者使用 \n * 确保必须有一个换行符，然后允许任何数字跟随它的空间。

请参阅下面的工作代码:

$(document).ready(function() {
  var editor  = $(".editor"),
      preview = $(".preview");
  
  // Remove new line and insert new line showing the text in value
  editor.keyup(function() {
    preview.val( this.value.replace(/;\s*htmlEditor.focus\(\);/g,".focus();") )
  }).click(function() {
    this.select()
  })
  
  // Easily Select Converted Code
  preview.click(function() {
    this.select()
  })
  
    preview.val( editor.val().replace(/;\s*htmlEditor.focus\(\);/g,".focus();") )
})

body {
  margin: 0;
  background: #333;
}

.editor, .preview {
  position: absolute;
  width: 50vw;
  height: 100vh;
  padding: 1em;
  border: 0;
  border-radius: 0;
  resize: none;
}

.editor {
  left: 0;
  color: #0b0;
  background-color: #000;
}

.preview {
  right: 0;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea class="editor" placeholder="Code with multiple lines here...">            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();            htmlEditor.replaceSelection("{" + selected_text + "}");
            htmlEditor.focus();</textarea>
<textarea class="preview" placeholder="Generated result here..."></textarea>