Replace Text with jquery

Replace Text with jquery

by Adi Jaya

HTML

<pre id="demo">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;data&gt;

  &lt;contents data-id=&quot;data-1&quot;&gt;
    &lt;xx:title&gt;title 1&lt;/xx:title&gt;
    &lt;value name=&quot;value-1&quot;&gt;321321321&lt;/value&gt;
  &lt;/contents&gt;
  
  &lt;contents data-id=&quot;data-3&quot;&gt;
    &lt;xx:title&gt;title 2&lt;/xx:title&gt;
    &lt;value name=&quot;value-2&quot;&gt;654654654&lt;/value&gt;
  &lt;/contents&gt;
  
  &lt;contents data-id=&quot;data-3&quot;&gt;
    &lt;xx:title&gt;title 3&lt;/xx:title&gt;
    &lt;value name=&quot;value-3&quot;&gt;69879879&lt;/value&gt;
  &lt;/contents&gt;
  
&lt;/data&gt;
</pre>
<button id=btn-1>Click me</button>

<hr>

<textarea id="demo2">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;data&gt;

  &lt;contents data-id=&quot;data-1&quot;&gt;
    &lt;xx:title&gt;title 1&lt;/xx:title&gt;
    &lt;value name=&quot;value-1&quot;&gt;321321321&lt;/value&gt;
  &lt;/contents&gt;
  
  &lt;contents data-id=&quot;data-3&quot;&gt;
    &lt;xx:title&gt;title 2&lt;/xx:title&gt;
    &lt;value name=&quot;value-2&quot;&gt;654654654&lt;/value&gt;
  &lt;/contents&gt;
  
  &lt;contents data-id=&quot;data-3&quot;&gt;
    &lt;xx:title&gt;title 3&lt;/xx:title&gt;
    &lt;value name=&quot;value-3&quot;&gt;69879879&lt;/value&gt;
  &lt;/contents&gt;
  
&lt;/data&gt;
</textarea>
<button id=btn-2>Click me</button>

CSS

pre,textarea {
    display : block;
    background: beige;
    width :70%;
    padding: 10px;
    margin: 10px 0;
    height: 150px;
    overflow: auto;
}

JavaScript

//example for text
$('#btn-1').click(function() {
	var content = $('#demo');
	var text = content.text();
	content.text(text.replace(/<contents data-id="data-3">/g, '<contents name="test" data-id="data-3">')
  	.replace(/<contents data-id="data-1">/g, '<contents type="product" data-id="data-3">')
  
  );

});

//example for textarea value
$('#btn-2').click(function() {
	var content = $('#demo2');
	var text = content.val();
	content.val(text.replace(/<contents data-id="data-3">/g, '<contents name="test" data-id="data-3">')
  	.replace(/<contents data-id="data-1">/g, '<contents type="product" data-id="data-3">')
  
  );

});