askquestionzero askquestionzero - 4 months ago 12
Javascript Question

Modify textarea text using jquery

good day.
how can i modify the text of textarea input using javascript

i have this content in my textarea, i want to remove the PublisherImprintName tag using jquery

<PublisherInfo>
<PublisherName>Ask question</PublisherName>
<PublisherLocation>ph</PublisherLocation>
<PublisherImprintName>ask stackoverflow</PublisherImprintName>
<PublisherURL>stackoverflow.com</PublisherURL>
</PublisherInfo>


and the posible output is

<PublisherInfo>
<PublisherName>Ask question</PublisherName>
<PublisherLocation>ph</PublisherLocation>
<PublisherURL>stackoverflow.com</PublisherURL>
</PublisherInfo>


is it possible using jquery?

i searched and i found this code, but i can't apply this to my problem, but the solution is almost similar

<script>
$(document).ready(function(){
$("button").click(function(){
$("PublisherImprintName").remove();
});
});
</script>


thank you. sorry for asking too many questions

another question:

how can i remove tag name but retain its value?

i found a solution about that here:
i tried applying it on my problem, but i can't make it work

Remove a HTML tag but keep the innerHtml

here is the text on my text area

<PublisherInfo>
<PublisherName>Ask question</PublisherName>
<PublisherLocation>ph</PublisherLocation>
<PublisherImprintName>ask stackoverflow</PublisherImprintName>
<PublisherURL>stackoverflow.com</PublisherURL>
</PublisherInfo>


and the possible output

<PublisherName>Ask question</PublisherName>
<PublisherLocation>ph</PublisherLocation>
<PublisherImprintName>ask stackoverflow</PublisherImprintName>
<PublisherURL>stackoverflow.com</PublisherURL>

Answer

You can do something like this,

$(function() {
  function removeNode(str, nodeName) {
    var pattern = '<'+nodeName+'>[\\s\\w]+<\/'+nodeName+'>';
    var regex = new RegExp(pattern, 'gi');
    return str.replace(regex, '').replace(/^\s*[\r\n]/gm, '');
  }
  
  $("#myBtn").on('click', function () {
    var txt = $("#txtArea").text();
    var newText = removeNode(txt, 'PublisherImprintName');
    $('#txtArea').text(newText);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtArea" rows="10" cols="50">
  <PublisherInfo>
    <PublisherName>Ask question</PublisherName>
    <PublisherLocation>ph</PublisherLocation>
    <PublisherImprintName>ask stackoverflow</PublisherImprintName>
    <PublisherURL>stackoverflow.com</PublisherURL>
  </PublisherInfo>
</textarea>
<button id="myBtn">Button</button>

Edit:

For your another question, you can do this..

$(function() {
  function removeNodeButRetain(str, nodeName) {
    var pattern = '<\/?'+nodeName+'>';
    var regex = new RegExp(pattern, 'gi');
    return str.replace(regex, '').replace(/^\s*[\r\n]/gm, '');
  }
  
  $("#myBtn").on('click', function() {
    var txt = $("#txtArea").text();
    var newText = removeNodeButRetain(txt, 'PublisherInfo');
    $('#txtArea').text(newText);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtArea" rows="10" cols="50">
  <PublisherInfo>
    <PublisherName>Ask question</PublisherName>
    <PublisherLocation>ph</PublisherLocation>
    <PublisherImprintName>ask stackoverflow</PublisherImprintName>
    <PublisherURL>stackoverflow.com</PublisherURL>
  </PublisherInfo>
</textarea>
<button id="myBtn">Button</button>