Select Text and Wrap It In a Link w/ Java Script - javascript

I have text names such as John Smith, DDS, MD. Actually 4 of them. I want to wrap the name alone in a link. I'm able to get the innerHTML of the name and credentials, such as above, and then get just the name. My code seems to work but I can't seem to replace the text with a link. I can append the link but I don't want that. Here's my code. And yes, this should be simple, but I'm still learning.
(function() {
let link1 = document.querySelector(".elementor-post-author").innerHTML;
let link2= link1.substr(0, link1.indexOf(','));
let a = document.createElement('a');
a.href="/somewhere";
a.innerText = link2;
link_name2.replace(link_name2,a);
})();
It's the last line I need help with. Thanks in advance.

You will need to append the a tag to the document, so you will need the parent element of where you want to add the newly created link.
const someDiv = document.getElementById('someDiv');
someDiv.appendChild(a);

Related

How to access child element <h2> and change background color

INPSECTION OF HTML
Hi!
I've Googled and tried different things but I can't get this to work. Hoping someone here could explain what's wrong with my code.
I work with a learning management system and to change how things look, I need to make custom code.
In this case, I can find the ID based on the inspection on the website. My problem seems to be accessing the child that I need to change.
Appreciate any help.
This the code I tried. Accessing the parent work, but I get confused why the second line when trying to access the child. On the third line I don't get the option to change style because most likely something wrong with second line.
let parentOfMyTraining = document.getElementById('assignedTrainingWidget');
let correctChild = parentOfMyTraining.firstChild.nextSibling.nextSibling;
//correctChild.style.fontColor
You can use document.querySelector to find your <h2 >
e.g.
// Find the first h2 inside the element with the id 'assignedTrainingWidget'
let correctChild = document.querySelector('#assignedTrainingWidget h2')
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Alternatively you can find all of the h2s then do something with the array of them with document.querySelectorAll.
// Find the all h2s inside the element with the id 'assignedTrainingWidget'
let h2Array = Array.from(document.querySelectorAll('#assignedTrainingWidget h2'));
let correctChild = h2Array[0]; // zero index is the first
let secondH2 = h2Array[1];
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Trying to learn JavaScript and use it to return only the address not the whole <a> tag

Hello and thank you in advance for any and all assistance.
I'm trying to teach myself the basics of JavaScript before I start a bootcamp. In the Prep course we are asked to return the header, first link text and first link href using document.querySelector(). The course showed us how to do the header and I was able to get the first link text. What I cannot seem to figure out is how to return JUST the address and NOT the whole tag.
Some of the things I've tried:
document.querySelector('a href')
document.querySelector('a href=')
document.querySelector('a href=""')
document.querySelector('a').innerHTML
document.querySelector('a').innerText
document.querySelector('a href').innerHTML
document.querySelector('a href').innerText
Thanks again.
John
First Understand that href is an attribute, not an element, anchor is an element that accepts href as the attribute to get this attribute value you need to first get that anchor element then get its attribute value. For example:
let anchor = document.querySelector("a");
let url = anchor.getAttribute("href");
console.log(url)
`
let anchor = document.querySelector("a");
let url = anchor.getAttribute("href");
console.log(url)
<a href='https://stackoverflow.com/' tittle='stackOverflow'Stack Overflow></a>
`
document.querySelector("a").getAttribute("href")
You can try something like this, to bring any attribute of the anchor tag
document.querySelector('a').attributes.href.value

How do I give an ID to part of the contents of a <title> tag?

I have a title tag that looks something like this:
<title>My Page Title - Photo #3</title>
I want to use JavaScript to change the numeric part of it, without having to hard code the "My Page Title - Photo #" string which is generated server side.
I tried wrapping the number in a span so that I could change the contents of the span:
<title>My Page Title - Photo #<span class="photoid">3</span></title>
But it seems HTML is not allowed in the title tag. I'd really like to pursue the class approach if possible as that would allow me to use a line of jquery such as this:
$('.photoid').html(new_photoid);
Did I mention that the photoid appears in several places on the page, which is why I want to be able to use this oneliner to change them all at the same time? For example:
<p>A paragraph also containing the number <span class="photoid">3</span></p>
A title can only have text, so you need to parse it out.
document.title = document.title.replace(/\d+$/, "new value");
title can't be set like that,
it's not a child of .html
some thing like
var num = 3;
document.title = "foo "+num
to set the title, then reuse num for these photoids.
Use the jQuery onDocumentReady syntax:
$(function () {
var elements = $('.contains_photoid');
elements.html(elements.html().replace("3", "4"));
$(document).attr('title', $(document).attr('title').replace("3", "4"));
});
You can't see the title change in this example, but that is the syntax. See Changing the page title with Jquery
The "3" and "4" can be changed to anything, so you can create the page with a unique character string in place of the real ID in order to easily replace it if it appears in text with numbers already in it.
http://jsfiddle.net/ZmXj5/1/
Javascript
var photoID = 355; //this assumes you have some code where you set this photoID value
var title = document.title;
title = title.substr(0,title.lastIndexOf('#')+1);
document.title = title+photoID;
See this fiddle for proof: http://jsfiddle.net/xrkhA/
(I used a div content because you can't use title in jsfiddle)
You can either use, but $('title') will fail in IE8
document.title="new title";
or
$('title').html('new title');
or
$(document).attr('title','new title');

How to remove or hide only visible text & link from website using java script

How to remove or hide only visible "text & link" from website using java script. For example I want to hide "some text " & "Link text here" from bellows code without remove this full code
<p style="text-align:center;">some text Link text here</p>
Please help me
Assuming you mean that you want to hide the <p> tag, you need this piece of JavaScript:
document.getElementsByTagName('p')[0].style.display = 'none';
That will hide the first <p> tag on your page. I suggest adding a class or id to the tags you want to hide though, so that you can select them more accurately.
If you want to clear all contents of your <p> tag, you can do this:
document.getElementsByTagName('p')[0].innerHTML = '';
That will simply remove all of the tag's contents. If you want to remove the whole tag itself (so that it doesn't leave the empty <p> tag sitting around) you can change the .innerHTML part to .outerHTML.
There are several things to consider: you may want the test to return, so we cannot just lose it. You may want to preserve event bindings on nested elements, so we cannot simply destroy those. In the end, I would suggest CSS being the most appropriate route to take.
var paragraph = document.querySelector("p");
paragraph.style.overflow = "hidden";
paragraph.style.textIndent = "-1000%";
You could, alternatively, create a custom class meant to set overflow and text-indent, and toggle that class with JavaScript (jQuery?) instead:
paragraph.classList.toggle( "offsetChildren" );
// jQuery: $(paragraph).toggleClass( "offsetChildren" );
Fiddle: http://jsfiddle.net/6UZ82/
Try this code
function Hide(ptext,aText){
var p = document.getElementsByTagName('p');
var a = document.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
if(a[i].innerHTML==aText){
a[i].setAttribute("style","display:none") ;
}
}
for(var i=0;i<p.length;i++){
var str = p[i].innerHTML;
var rp = str.replace(ptext,'<span style="display:none">'+ptext+'</span>');
p[i].innerHTML = rp;
}
}
Hide('some text','Link text here');
Also you can show back using the reverse logic. i have commented out the show function in fiddle. you can uncomment it and click run to see it in action
Demo here

add an <a> element to Google Document using Apps Script

I want to include a "properly formatted" mailto: link in a paragraph of text in my document:
"Please contact me if you have any questions."
The only way I can think of doing this is with multiple Paragraphs and Styles, which I don't think would be an elegant solution. I was wondering if there was just some easier way of including an <a> tag directly in the document. The Text object has a setLinkUrl() method, but I'm not sure how to create a Text object! var link = "my link text" creates a String.
A working solution using the paragraph class,
var par1a = doc.appendParagraph("Please ");
var link = doc.appendParagraph("Contact me ").setLinkUrl("mailto:me#me.com");
link.merge();
var par1b = doc.appendParagraph("if you have any questions.");
par1b.merge();

Categories