Develop Reference

I wanto copy text in tag in list

Step 1
get id form button
Step 2
copy text in td for same id
Codepen)
https://codepen.io/terecal/pen/LoxmbP?editors=1010
$(".copy_code").click(function(e){
e.preventDefault();
var id = this.id
alert("id : ", id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>code</td>
<td colspan="122" id="my_code_122"> hello world </td>
</tr>
</table>
<button type="button" name="button" id="122" class="copy_code">copy</button>
Is it possible?
p.s
I applied your method.
The following code works fine
`
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id')
alert("id : " + id)
var text = document.getElementById(id),
textVal = text.innerText;
textTd = $(`#my_code_${id}`).text()
alert("copy code " + textTd) // textVal code copy
// I want to copy this text as if pressing ctrl + c. Is there a way? Thank you if you let me know.
});
`
The problem is almost solved.
I just want to copy the text I got as if I pressed ctrl + C
Can you tell me how?
ps2
current code is this
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id')
alert("id : " + id)
var text = document.getElementById(id),
textVal = text.innerText;
textTd = $(`#my_code_${id}`).text()
alert("copy code " + textTd) // textVal code copy
// I want to copy this text as if pressing ctrl + c. Is there a way? Thank you if you let me know.
var dummy = document.createElement('textarea');
dummy.value = textTd;
//
document.body.appendChild(dummy );
dummy.select();
//
document.execCommand('copy');
document.body.removeChild(dummy);
alert("copy code2 " + textTd)
});
and copy is normally works
but after ctrl + v
it's new line(br) is not work ^^;;
original:
from django.contrib import admin
from django.urls import path, include
from . import views
app_name= 'css_challenge'
urlpatterns = [
]
copy:
from django.contrib import adminfrom django.urls import path, includefrom . import views
app_name= 'css_challenge'urlpatterns = [
]
is it possible to apply new line??

Perhaps try this. First of all you need to put a + rather than a , in your alert. Secondly, I don't know if you specifically need copy functionality because you want to paste the text somewhere else. AFAIK, I've only "copied" like that on inputs/textareas. I am unsure whether other elements support that type of API. Regardless, the below code should grab the text content. I haven't tested it but there ya go.
$(".copy_code").click(function(e){
e.preventDefault();
var id = this.id
alert("id : "+ id)
var text = document.getElementById(id),
textVal = text.innerText;
console.log(textVal);
});

Maybe you can try:
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id)
// var copyText = document.getElementById("my_code");
// copyText.select();
// document.execCommand("copy");
// alert("Copied the text: " + copyText.value);
});

You can copy text to the clipboard using javascript - it's just a little inconvenient. The text has to be part of a html element.
Let's start by creating a dummy text element
var dummy = document.createElement('textarea');
and give it the value of your variable
dummy.value = textTd;
add the dummy to the DOM
document.body.appendChild(el);
select it
dummy.select();
finally copy it's text content to the system clipboard
document.execCommand('copy');
and ultimately remove the created element from the DOM again
document.body.removeChild(dummy);

Javascript highlighter in editable code

My goal is to have a highlighter made in JavaScript which change some word's color multiple times.
<div id="code" contenteditable="true">
hello world hello world
</div>
I want to have an outuput as : " Hello world Hello world "
How can I change the color of both "hello" using JavaScript?

By this following code, you can write a function to find the words and replace them with a colorful element (e.g or & ...)
$(function(){
// inquire element for run the function
var elem = $('#code');
// call highlighter method with the word and elemnet
highlighter('hello', elem);
});
function highlighter(word, elem){
// get inner html from passed element
var html = elem.html();
// define a new regex for replacing the word on specified element
var reg = new RegExp(word,"g");
// replace all found words with a new wrapped word
html = html.replace(reg, "<span class='highlight'>" + word +"</span>");
// set the specified element with new html
elem.html(html);
}
.highlight {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="code" contenteditable="true">
hello world hello world
</div>

You have to split your text to get each individual word, and then add each one in different 'span' tags which will have a 'fontWeight' property set to 'bold' if the word is 'hello'.
Here's an example:
var div = document.getElementById("code");
var text = div.innerText;
div.innerText = '';
text.split(' ').forEach(x => {
const span = document.createElement('span');
span.innerText = x + ' ';
if(x == 'hello')
span.style.fontWeight = 'bold';
div.appendChild(span);
})
Try out this fiddle

Match part of text inside of tag

I am in client side context.
I have this html:
<p>Text text \n other text </p>
I want to match only \n element inside paragraph, and replace only this with "br" tag.
I want to do this only inside tag "p" and for all match.
I supposed to use regex in javascript.
Thanks and sorry for my bad english.

Use html() method with callback and inside callback replace text using String#replace method.
$('p').html(function(i, htm) {
return htm.replace(/\\n/g, '<br>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text text \n other text</p>
UPDATE 1 : If it's a string then use String#replace method.
console.log(
'<p>Text text \n other text</p>'.replace(/\n/g, '<br>')
)
UPDATE 2 : If the string contains other tag element and you just want to update the p tag then do something like.
var str = '<p>Text text \n other text</p>';
console.log(
// create a temporary div eleemnt
$('<div>', {
// set html content from string
html: str
})
// get all p tags
.find('p')
// iterate and replace \n
.html(function(i, htm) {
// replace \n with br tag
return htm.replace(/\n/g, '<br>')
})
// back to the temp div
.end()
// get it's updated html content
.html()
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
UPDATE 3 : With pure JavaScript by generating a temporary DOM element.
var str = '<p>Text text \n other text</p>';
// create a temporary div element
var div = document.createElement('div');
// set html content form string
div.innerHTML = str;
// get all p tags and convert into Array using Array.from
// for older browser use [].sclice.call instead
Array.from(div.getElementsByTagName('p'))
// iterate over p tags
.forEach(function(el) {
// update the html content
el.innerHTML = el.innerHTML.replace(/\n/g, '<br>')
});
// get updated html content
console.log(div.innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use a for loop with getElementsByTagName:
for(i = 0; i < window.document.getElementsByTagName("p").length; i++){
window.document.getElementsByTagName("p")[i].innerHTML = window.document.getElementsByTagName("p")[i].innerHTML.replace(/\\n/g, "<br/>");
}
If this is inside a string and not inside the HTML, you can add it to a <div> element while handling it like this:
var myString = "<p>Text text \n other text </p>";
var div = document.createElement("div");
div.innerHTML = myString;
for(i = 0; i < div.getElementsByTagName("p").length; i++){
div.getElementsByTagName("p")[i].innerHTML = div.getElementsByTagName("p")[i].innerHTML.replace(/\\n/g, "<br/>");
}
myString = div.innerHTML;

Change HTML tags, including children of same tag

I'm using this previously answered question about altering an HTML tag and while trying to update some HTML tags, I'm having trouble reaching the tags within a parent of the same tag.
For example, updating a span to a div should result in:
<div>
<div>div within a div</div>
</div>
But is showing up like:
<div>
<span>div within a div</span>
</div>
And for reference, this is the js:
var divTag = 'div';
$('span').each(function() {
var outer = this.outerHTML;
// Replace all span tags with the type of divTag
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + divTag);
// Replace closing tag
regex = new RegExp('</' + this.tagName + '>$', 'i');
newTag = newTag.replace(regex, '</' + divTag + '>');
$(this).replaceWith(newTag);
});
Any help is greatly appreciated! Thanks!

A little transformation in #guest271314 solution, to avoid replace the content, only replace the HTML tags.
var div = $("div");
var html = div[0].outerHTML.replace(/<div/g, "<span");
div.replaceWith(html);
FIDDLE: https://jsfiddle.net/lmgonzalves/31c5bebx/1/
EDIT:
$("div").each(function(){
var html = $(this)[0].outerHTML.replace(/<div/g, "<span");
$(this).replaceWith(html);
});
FIDDLE: https://jsfiddle.net/lmgonzalves/31c5bebx/5/

var div = $("div");
var html = div[0].outerHTML.replace(/div(?=>)/gi, "span");
console.log(html);
div.replaceWith(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<div>div within a div</div>
</div>

JavaScript string replace in textarea

I'm trying to create a simple page that "corrects" YouTube's old embed code so that it works in PowerPoint 2010. If I hard code the embed code into a textarea on the page, it works fine, but if the user pastes the embed code into the text area, the javaScript doesn't seem to run.
Take a look here:http://jsfiddle.net/pch8N/
Here's what I have so far:
<p>Click the button to "fix" the old embed code</p>
<textarea rows="10" cols="60" id="demo"></textarea>
<br/>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace(/\/\/www.youtube/g,"http://www.youtube").replace(/version=3/g,"version=2");
document.getElementById("demo").innerHTML=n;
}
</script>
<button onclick="myFunction()">Try it</button>
Thanks for the help!

You should use value instead of innerHtml
function myFunction2()
{
var str=document.getElementById("demo2").value;
var n=str.replace(/\/\/www.youtube/g,"http://www.youtube").replace(/version=3/g,"version=2");
document.getElementById("demo2").value=n;
}

var str=document.getElementById("demo").innerHTML;
You should use .value and not .innerHTML

Put your textarea inside form tag
Then use
var str=document.getElementById("demo").value;

// hope this would be usefull
// i used these codes for auto completing the texts in textarea.
// other methods change all matching items before the selected text
// but this affects only the text where caret on.
// at first, i divided textarea.value into 3 pieces. these are ;
// p1; until the 'searched' item, p2 after 'searched' item
// and pa = new item that will replaced with 'searched' item
// then, i combined them together again.
var tea = document.getElementById(targetTextArea);
caretPosition = tea.selectionStart - ara.length; //ara=searched item
p1 = tea.value.substring(0,caretPosition);
console.log('p1 text : ' + p1);
p2 = tea.value.substring(caretPosition+ara.length,tea.value.length);
console.log('p2 text : ' + p2);
pa = yeni; //new item
console.log('pa text : ' + pa);
tea.value = p1 + pa + p2;
tea.selectionStart = caretPosition + yeni.length;
tea.selectionEnd = caretPosition + yeni.length;
tea.focus();