I am trying to copy a specific part of a sentence from a div to another and input it to another area using JavaScript.
<div id="copyfromhere">This is +how+ it works.</div>
<div id="pastehere"></div>
I'd like to copy the part in between the + symbols. The + symbols are included in the original sentence.
you can get the text from div and split it based on '+', which will return the array, then you can access that arrays 2nd value indexed at 1.
var pastehereDiv = document.querySelector("#pastehere");
var copyfromDiv = document.querySelector("#copyfromhere")
pastehereDiv.textContent = copyfromDiv.textContent.split('+')[1];
var copy = function() {
// grab the origin and destination divs
var origin = document.getElementById("copyfromhere");
var destination = document.getElementById("pastehere");
// get the text from the origin, split on "+" and then get the second element in the array
var text = from.innerText.split("+")[1];
// apply that text to the destination div
destination.innerText = text;
}
<div id="copyfromhere">This is +how+ it works.</div>
<div id="pastehere"></div>
<button id="copy" onClick="copy()">Copy</button>
Obviously this will only work if there aren't any other +s in your origin div.
Related
I'd like to display hyperlinks in my page template based on values in an array.
If the page contains a certain value, I'd like to insert the corresponding hyperlink.
From another question, I've managed to cobble together a script that displays a link when a value is found in a string:
<style>
#viewSchoolLink
{display: none;}
</style>
<div id="schoolName">University of Houston</div>
<div id="viewSchoolLink">View on Some Link</div>
<script type="text/javascript">
var div = document.getElementById("schoolName");
var text = div.innerHTML;
if (text.indexOf("University of Houston") >= 0) {
// if so set display to block.
document.getElementById("viewSchoolLink").style.display = "block";
}
</script>
The thing is, I have like 80-90 schools in my list. I suppose I could create 80-90 separate divs with their own unique links, but I imagine there is a much more efficient way to do it. I have an array I've set up as follows:
const schoolLink = {
"University of Houston": "https://www.somelink.com/widget=4379",
"Vanderbilt University" : "https://www.somelink.com/widget=2537",
"University of Dundee": "https://www.somelink.com/widget=2845",
}
Is there a way I can loop through the array to find a match in the key and then insert the value from the array as a hyperlink?
<script type="text/javascript">
var div = document.getElementById("schoolName");
var text = div.innerHTML;
if (text.indexOf("key in array") >= 0) {
// if so display div and use value from the array as hyperlink
}
</script>
Or, since the only part of the link URL that is unique is the widget number, could I set up my array like this:
const schoolLink = {
"University of Houston": 4379,
"Vanderbilt University" : 2537,
"University of Dundee": 2845,
}
and then just build the URL based on the value in the array:
var part = value in array
var link = ''View on Some Link ';
to insert any of the HTML using Javascript we assign in the following manner:
var div = document.getElementById("schoolName")
div.innerHTML = "<a href='https://www.somelink.com/widget=value in array'/>"
if you want to enter the dynamic data in the place of "value in array", then:
div.innerHTML = `<a href="https://www.somelink.com/widget=${variable}"/>`
I'm trying to put every new word for title on the new line using js. I tried different ways, but they don't work.
dictionary.title += word.value; - here I add attribute title for my dictionary class with word.value value. It comes together like: "HelloI'mJohn" instead of
"Hello
I'm
John". How can I do that on the new line using JavaScript code?
Use
\n
or
br tag
for new line.
dictionary.title += word.value + "\n";
Like in the above answers as said you can use <br> and \n for the new line but there are many alternative ways you can achieve this for your understand I have written a code where I used a tag which is also called a block element where it takes given width and height and add a new line at the end automatically. There are many block-level elements you can also use for new lines.
let value = document.querySelector(".newInput");
let btn = document.querySelector("button");
let div = document.querySelector(".dictionary");
function storeValues(){
let dictionary = "";
if(value.value){
dictionary += `<p>${value.value}</p>`
}
div.innerHTML += dictionary
}
btn.addEventListener("click", storeValues);
Enter Word: <input type='text' class='newInput'/>
<button type='submit' class='newInput'>Submit</button>
<div class='dictionary'>
<!-- Dicitonary will appear here-->
</div>
I have a string of text that I want to compare with another string that has HTML code. The problem is that the text I need to compare it to in the HTML code is within different tags. Also, if the string exists in the HTML code then I want to wrap it inside a <mark> tag.
This is the example I am using:
var html = "<h1>This is a heading</h1><div class="subtitle">and this is the subheading</div><p class="small">this is some example text</p>";
var lookup = "is a heading and this is the subheading this is some";
var finalHtml = ""; //will contain new html
//Need to do some comparison and then add a <mark> tag around found string.
console.log(finalHtml);
//This should print "<h1>This <mark>is a heading</h1><div class="subtitle">and this is the subheading</div><p class="small">this is some</mark> example text</p>"
I am using Javascript/Jquery to do this.
This will only help to search your lookup within html (i.e., no marking). I have removed tags-spaces & then checked.
var html = '<h1>This is a heading</h1><div class="subtitle">and this is the subheading</div><p class="small">this is some example text</p>';
//remove html tags & spaces.
cleanHtml = html.replace(/<\/?[^>]+(>|$)/g, "").replace(/\s/g,"");
var lookup = "is a heading and this is the subheading this is some";
lookup = lookup.replace(/\s/g,'');
if(cleanText.includes(lookup)){
//match found
}
I'm looking to remove span tags that wrap blocks of text in an in-browser editor but am having trouble if the text contains any sort of special characters like newline '\n' or encoded characters like , • , etc.
Here's my code that works on sentences without encoded characters
function fnIgnoreThisErr(evtTargID){
// use the passed parameter
var errIdx = evtTargID.substr(evtTargID.indexOf('err-') + 4);
// buld span tag for finding
var errSpan = "span.err-" + evtTargID;
// declare the editor
var editor = CKEDITOR.instances.editor1;
// get text from the editor
var edata = editor.getData();
// find the specific span in the text
var spanData = $( edata ).find(errSpan);
// get outerHTML and innerText to use for replacement
var myCurrText = spanData[0].outerHTML;
var myNewText = spanData[0].innerHTML;
// standard js replace works if no special chars
var replace_text = edata.replace(myCurrText, myNewText); //
// sets the data back in CKEditor
editor.setData(replace_text);
}
Here's an example of the text with the span tag
myCurrText:
<span class=\"vts-warn vts-ParseFailure err-2\">Approval of ICA<br />\n GAMA requested further clarification of proposed §§25.1739 (now §25.1729) and 25.1805(b) (now §26.11(b)) requirements that ICA prepared in accordance with paragraph H.</span>
And with the span tag removed.
Approval of ICA<br />\n GAMA requested further clarification of proposed §§25.1739 (now §25.1729) and 25.1805(b) (now §26.11(b)) requirements that ICA prepared in accordance with paragraph H.
It works great on plain sentences without any encoded characters. I can switch to jQuery but couldn't get replaceWith to work either.
What am I missing here?
I figured it out. There appears to be a discrepancy between html entities and the way they are being rendered/interpreted by the browser and my JS.
i.e. The outerHTML of the span is not a character-for-character match of the text in edata.
So I just get the indexOf value for the start of the span and the length of the span node. However, due to the discrepancy mentioned, this length may include additional characters. So, next, I find the exact position of the '' tag. From there, I build a string variable that exactly matches the text that needs to be replaced.
Here's my final code. (I kept it long-form for clarity)
function fnIgnoreThisErr(evtTargID){
// use the passed parameter
var errIdx = evtTargID.substr(evtTargID.indexOf('err-') + 4);
// buld span tag for finding
var errSpan = "span.err-" + evtTargID;
// declare the editor
var editor = CKEDITOR.instances.editor1;
// get text from the editor
var edata = editor.getData();
// find the specific span in the text
var spanData = $( edata ).find(errSpan);
// extract the span class name
var spanTag = '<span class="'+spanData[0].className+'">'
// find indexOf value for the span opening tag
var spanPos = edata.indexOf(spanTag);
// get the initial length of the span.
var spanLength = spanData[0].outerHTML.length;
// get the actual text from that span length.
var spanString = edata.substring(spanPos,spanPos+spanLength);
// find the acutal position of the span closing tag
var spanClose = spanString.indexOf('</span>');
var spanTagClosePos = spanClose+7;
// extract the true text comprising the span tag
var spanStringMod = edata.substring(spanPos,spanPos+spanTagClosePos);
var spanInnerHtm = spanData[0].innerHTML;
log("errSpan: "+ errSpan);
log("errSpanClass: "+ errSpanClass);
log("spanData: "+ JSON.stringify(spanData));
log("spanPos: "+ spanPos);
log("spanTagClosePos: "+ spanTagClosePos);
log("spanStringMod: "+ spanStringMod);
log("spanInnerHtm: "+ spanInnerHtm);
var newEdata = edata.replace(spanStringMod, spanInnerHtm);
log(" newEdata: "+ newEdata);
// update the editor
editor.setData(newEdata);
}
I hope this helps someone, somewhere, at some time!
Cheers!
I have added one text box . I am getting the text entered text box like :
var text = document.getElementById("textarea").value;
then by using split function I am getting one particular String from say first string from the text . And tried to apply string properly on that like :
var split = text.split(" ");
var word = split[0];
word.italics();
then I formed text again with changed properties of first string and reassigned it to the text box
document.getElementById("textarea").value = text;
but those string properties are not applying to the word . same issue with all string properties like font color ,link etc . I dont know whats wrong I am doing ?
You cannot format text in a textbox
Try
document.getElementById("someContainerLikeADivOrSpan").innerHTML=text
For example
Live Demo
window.onload=function() {
document.getElementById("text").onkeyup=function() {
var text = this.value;
var split = text.split(" ");
var word = split[0];
document.getElementById("output").innerHTML=word.italics();
}
}
using
<textarea id="text" placeholder="type some words"></textarea>
<span id="output"></span>
You should use a div,span or p element to get the italics word. Try this,
HTML
<textarea id="textarea">test the italics now.</textarea>
<div id="div"></div>
SCRIPT
text=text.replace(word,word.italics());// replace the first word with italics
document.getElementById("div").innerHTML = text;// use div not textarea
Demo