Develop Reference

JQuery Selectors - How can I copy to clipboard with different ids

<h3>Something here</h3>
<p id="copythis">Copy this code</p>
<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>
<h3>Something here</h3>
<p id="copythisone">Copy this other text</p>
<script type="text/javascript">
$(document).ready(function(){
$('#copythis').click(function(){
var text = $("#copythis").get(0)
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
});
</script>
I have different texts to copy (not all at once).
this code works for one text only. How do I work for more than one?
I just changed this part and it worked:
```var text = $(this).get(0)```
Thaks to #wahwahwah

$('#copythis').on("click", function(){
console.log($(this).text() + ": you clicked on '#copythis' ");
});
$('.copy').on("click", function(){
console.log($(this).text() + ": you clicked on a element with the class 'copy'");
});
$('p').on("click", function(){
console.log($(this).text() + ": you clicked on a <p> element'");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Something here</h3>
<p id="copythis" class="copy">Copy this code</p>
<h3>Something here</h3>
<p id="copythisone" class="copy">Copy this other text</p>
<h3>Something here</h3>
<p id="copythisone" class="copy">Copy this other text</p>
With JQuery, you can use .text() to get the contents of a p element. You could also change your selector to just grab the contents of all 'p' elements. The ID selector .(#copythis) will grab the element related to only that ID. The class selector (.copy) will attach to all elements with the class "copy."
This will help you isolate what's being clicked on. What you want to do with it - copy the contents to clipboard - might change the logic a bit depending on if you have control over the HTML source, and how your deciding what gets copied and doesn't.

I don't know what you are planning to do do, but basically this line
var text = $("#copythis").get(0);
is where the p-node will be selected from your dom an afterwards the content of this p-tag will be copied.
change it to
var text = $("#copythisone").get(0);
to copy the content of the 2nd p -tag
You could change the id of your third p-tag to sth. like copythisonetoo
var text = $("#copythisonetoo").get(0);
to get the content of the 3rd p tag.
But per definition an id should be unique in your document. Refer to this link:
https://www.w3schools.com/html/html_id.asp#:~:text=The%20id%20attribute%20specifies%20a,element%20with%20the%20specific%20id.
You could create a method with a parameter for the text to copy or an id.
With some additional info and your certain usecase we could probably help you most.

Get parent div id name when inner div clicked

I am struggling to find a way to get the name of the parent ID in a string. The code is part of a chat app written in Javascript and jQuery. Each time someone enters a message, the string outputs a block with username and text with a Close-x box before the username. When someone clicks the Close-x, it needs to grab the ID name of the parent div(json.innerdiv). The div with ID named json.outterdiv is the ID which allows me to delete the whole block message where as the json.innerdiv allows me to remove text, change text or just hide/show text. I tried searching on here for answers but all I ever get is undefined or null results.
My code:
var bubble = $('<div class="bubble-container" id="'+json.outterdiv+'"><span class="bubble"><div class="bubble-text" id="'+json.innerdiv+'"><p><div class="close-x" onclick="DelBubble(this)"></div>Some text</p></div></div>');
function DelBubble(clicked_id) {
alert($(this).parent().attr('id'));
}

Pass the event to onclick then get the closest of a class selector using jquery:
var bubble = `
<div class="bubble-container" id="2">
<span class="bubble">
<div class="bubble-text" id="3">
<p>
<div class="close-x" onclick="DelBubble(event)">
Close
</div>
Some text
</p>
</div>
</div>`;
$('body').append(bubble)
function DelBubble(e) {
const bubbleTextId = $(e.target).closest('.bubble-text').attr('id');
const bubbleContainerId = $(e.target).closest('.bubble-container').attr('id');
console.log({bubbleTextId,bubbleContainerId})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Move closing </a> tag to the end of a containing element

I'm trying to get a link to wrap around all text within a div. I can only find solutions where you move certain DOM elements entirely, or move other elements into an element.
current situation:
<div class="text">
text and more text
</div>
desired situation:
<div class="text">
text and more text
</div>
Unfortunately, I cannot change the markup, so I have to do something with jQuery.

Avoid messing with html directly, it's better not to change it or overwrite. All you need to do is to take next text sibling Node and append to previous a:
$('.text a').each(function() {
$(this).append(this.nextSibling)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
If necessary you can check for the next node to be TextNode, if you need to skip element nodes:
if (this.nextSibling.nodeType === 3) {
$(this).append(this.nextSibling)
}

You need to use .append( function ) to insert nextSibling of anchor into it.
$(".text a").append(function(){
return this.nextSibling
});
$(".text a").append(function(){
return this.nextSibling
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
Also you can use .html( function ) instead and then remove next sibling using .remove()
$(".text a").html(function(i, h){
return h + this.nextSibling.nodeValue;
})[0].nextSibling.remove();
Or in one line using ES6
$(".text a").html((i,h) => h+this.nextSibling.nodeValue)[0].nextSibling.remove();
$(".text a").html(function(i, h){
return h + this.nextSibling.nodeValue;
})[0].nextSibling.remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
Or using pure javascript
var ele = document.querySelector(".text a");
ele.innerHTML += ele.nextSibling.nodeValue;
ele.nextSibling.remove();
var ele = document.querySelector(".text a");
ele.innerHTML += ele.nextSibling.nodeValue;
ele.nextSibling.remove();
<div class="text">
text and more text
</div>

HTML/JavaScript doesn't work in a way that you can "move" a closing tag like that, but what you can do is move the text. Also, you don't need jQuery to do it; it's very easy to do with vanilla JavaScript:
let link = document.querySelector('.text a')
let textAfterLink = link.nextSibling
link.appendChild(textAfterLink)
<div class="text">
text and more text
</div>

You can first get the HTML inside the div with class text and then replace the closing tag </a> with '' then finally append a closing </a> tag to the replaced string so that you get what you expect:
var aHTML = $('.text').html();
aHTML = aHTML.trim().replace(/<\/a>/, '') + '</a>';
$('.text').html(aHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>

Here you have one approach that will find all unwraped text inside the element with class .text and append all of these texts to the first <a> child. This approach uses the content() method chained with a filter() using the addequated condition for remove the texts children, while at the same time they are appended to the <a> element.
$('.text').each(function()
{
$(this).contents().filter(function()
{
// Filter text type only.
return (this.nodeType === 3);
})
.appendTo($(this).find("a:first-child"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
<hr>
<div class="text">
Rise up this morning
Smile with the rising sun
<br>
Three little birds
<br>
Pitched by my doorstep
<br>
<p>DON'T TOUCH THIS ONE!</p>
Singing sweet songs
<br>
Of melodies pure and true
<br>
Sayin': This is my message to you
<br>
Saying, don't worry about a thing
<br>
'Cause every little thing
<br>
Gonna be all right
</div>

Replace the text using jquery closest

The thing I have tried so far is
<h3>This is what I want to display inside "ppname"</h3><a class="" href="javascript:" code="displayed">HO</a>
<h3>Just for test</h3>
<div class="pp" style="display:none;">Not
<div class="ppname"></div>
<div class="ppcode"></div>
</div>
The Jquery
$('a[code]').click(function () {
$('.ppcode').html($(this).attr('code'));
$('.ppname').html($(this).closest("h3").html());
$('.pp').show();
});
$('span.close').click(function () {
$('.pp').hide();
});
The text in attribute code is displaying inside the div with class ppcode but the text in h3 is not displaying inside div with class ppname.
Thanks

Use prev instead of closest to display the sentence This is what I want to display inside "ppname" in the ppname-container:
$('.ppname').html($(this).prev().html());

search and replace text inside html of div in javascript but not text inside tag

I've some HTML structure and i want to search particular text inside that HTML structure.
see below example
<h1>Try to span some text on this page</h1>
<div>
span is a <span>paragraph</span>.</div>
<p class="span ddd">This 123is a paragraph.1</p>
<div class="span ddd">This is some span in a div element.</div>
Now if I'm searching for "span" text then, "span" word should be wrapped with div tag.
But only "span" word in text and not from class or other tags.
i want output like this (wrap using div or span)
<h1>Try to <span class="search">span</span> some text on this page</h1> <div> <span class="search">span</span> is a <span>paragraph</span>.</div> <p class="span ddd">This 123is a paragraph.1</p> <div class="span ddd">This is some <span class="search">span</span> in a div element.</div>

<div id="wrapper">
<h1>Try to span some text on this page</h1>
<div>
span is a <span>paragraph</span>.
</div>
<p class="span ddd">This 123is a paragraph.1</p>
<div class="span ddd">This is some span in a div element.</div>
</div>
I have modifed your html by enclosing with a wrapper for getting my selector. But you can use your own selectors.
$(document).ready(function(){
var str=$('#wrapper').html();
$('#wrapper').html(str.replace( new RegExp(" span ","g"),"<div>span</div>"));
});
This code will do what you need.
Here is the jsffiddle for this.
If your problem is fixed then please don't forget to mark this as solved. Thanks.

I am not very sure if this is what you want. But something like this should work
$(function() {
var found = $('div:contains("span")');
});
Here is a fiddle
http://jsfiddle.net/z7ckK/
If you use *:contains it search it inside HTML.
UPDATE:
Initially missed the replace part. I have a solution, but for that you need a wrapping element over the search elements. Please check my fiddle. You will understand.
http://jsfiddle.net/z7ckK/3/

You can try this regex: (?<!<[^>])${searchWord}(?<![^>]<)
let innerHTML = document.body.innerHTML
let searchWord = 'span'
let regex = new RegEx(`(?<!<[^>])${searchWord}(?<![^>]<)`,gi)
innerHTML.replace(regex, (x)=> {
return `<div>x</div>`;
});