Michael Schwartz Michael Schwartz - 3 months ago 7
Javascript Question

Easily replace string on multiple lines in a value

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

I'm working with code like below but it's repeated multiple times.

Basically I want to turn this....

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

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


to this....

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

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


Is there a converter out there that does this for me?

I tried using....

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


but it's not working and console doesn't tell me anything :(



$(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

You need to escape your parentheses: htmlEditor.focus\(\);. I'd also suggest \s* instead of \n with a bunch of spaces, but that's up to you. Just be sure to use the right number of spaces (12, not 8, for the example you gave), or maybe use \n * to make sure there has to be a newline but then allow any number of spaces to follow it.

See working code below:

$(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>