Can someone tell me how to preserve the url in this replace? when i run this code it finds and replaces the text but removes the link text and just has the word text. I need to preserve the link and this is just a simple example. The actually code I need to work with a a dynamic link so I can just manually replace it.
$(".text_div").text(function () {
return $(this).text().replace("contains", "hello everyone");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_div">
This div contains some text.
</div>
this give's me
This div hello everyone text.
Use .html() instead of .text():
$(".text_div").html(function() {
return $(this).html().replace("contains", "hello everyone");
})
$(".text_div").html(function() {
return $(this).html().replace("contains", "hello everyone");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_div">
This div contains some text.
</div>
Instead of using $(this).text(), you should be doing $(this).html().
Related
I want to use javascript to find and replace a word which has been split in a few tags.
For example, the html code:
<html>
<body>
<div id="page-container">
This is an apple.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
</div>
</body>
</html>
And the it looks like below in the web browser:
This is an apple.
apple.
I use this javascript to find and replace the word "apple":
var a = document.getElementById('page-container').innerHTML;
a=a.replace(/apple/g,'pear');
document.getElementById('page-container').innerText=a;
But the result in the web browser is very bad, and all the tags could not work:
This is an pear.
<div>
<span>a</span><span>p</span><span>ple</span>.
</div>
It seems the replace function worked for the first row but cannot recognize the word split in the tags. This is an example, the whole content could be much more complex with more tags like , , not only ... Is there a way to replace only text but keep the original html tag format?
var a = document.getElementById('page-container').textContent;
a = a.replace(/apple/g, 'pear');
var a=a.split('.');
document.getElementById('page-container').innerHTML = `${a[0]}.<br/><span> ${a[1]}
<span>`;
That is because you have nested elements, so when you set innerHTML of the parent div, it treats inner div as text and print it out , try to replace this :
document.getElementById('page-container').innerText=a;
with this :
document.getElementById("page-container").firstChild.innerHTML = a;
So, you target only your first child which is parent div.
Live example:
https://jsbin.com/hujurageya/edit?html,js,output
In an Html file that I have, there is a paragraph tag that basically looks like this:
<p class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</p>
The contents of this paragraph are grabbed from a textarea that a user fills out and the value of this textarea is grabbed via jquery and filled into this element.
The output looks like this: Hey What's Up
This paragraph tag ignores the newlines within the paragraph, so the paragraph displays all on one line. Due to the format and layout of the project, I can't necessarily change the html source. I was wondering if there was a way to change this exact element to be:
<pre class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</pre>
using only javascript. Is this possible? This is so my output will keep the newlines.
I think you are looking for something like this. you tagged jquery so I used that but this could be done in vanilla js too.
I linked to a onkeyup event if you wanted to change to use the button only if you wanted
$(document).ready(function(){
function updateContent() {
$('#p1').html($('#source').val());
}
$('#update').on('click', function(e){
updateContent();
// add other stuff here
// for only the click event
})
$('#source').on('keyup', updateContent);
})
button {
display:block;
}
#source {
height:100px;
}
#p1{
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="source" placeholder="Update content and click 'update'">new content
add line breaks and <p>html markup</p>
</textarea>
<button id="update" >Update</button>
<p id="p1">THIS WILL CHANGE!</p>
It is very simple and has been asked before... BUT here it is, using DOM:
document.getElementById("p1").innerHTML = "<p>This</p><p>Has</p><p>Changed!</p>";
<p id="p1">THIS WILL CHANGE!</p>
So your piece of code you need is:
document.getElementById("p1").innerHTML = "New text!";
EDIT
This is simpler, easier and more browser friendly than using <pre> tags. Therefore, I would highly recommend you to use this instead.
Looking for a script that will check the page for any text that has double quotes e.g. Hello world, "this is a great example". So grabbing "this is a great example" and wrapping it in an <em> tag
So the result will be <em>"this is a great example"</em>
Is this possible?
That's pretty easy to achieve with jQuery:
$('body :not(script, style)').contents().filter(function() {
// find text nodes in <body> ignoring <script> and <style> tags
return this.nodeType === 3;
}).replaceWith(function() {
// find quoted text and wrap it with <em> tags
return this.nodeValue.replace(/"[^"]+"/g, '<em>$&</em>');
});
span {
color: #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
Hello world! "This is a great example"<br>
<span>Hello world! "This is a great example"</span>
</p>
You can look for the regex in the whole page using javascript like this:
var matchingText = document.documentElement.innerHTML.match(/"(.*?)"/);
The result will be an array with Strings in double quotes.
Than you can iterate through them and add <em> tag to each one of them.
I would like to encode contents of elements using jQuery but I can't find a function which does this automatically, so I'm trying to create a function which does this content by content.
For example if I have the following HTML element:
<div>
text&
<p class="foo">barbaz8798++xyzzy</p>
<span>1<5</span>
</div>
The desired output would be:
<div>
text%26
<p class="foo">barbaz8798%2B%2Bxyzzy</p>
<span>1%3C5</span>
</div>
I need to encode only the contents of those elements. How can I achieve this?
One approach which came to my mind is to select the elements by wrapping everything into a wrapper and then calling wrapper.find("*") and then replace their text with element.text(encodeURIComponent(element.text())), but isn't there a better way, please?
You could iterate over the contents of the container element(div in your sample) the change the contents of all text nodes
//need to use a more specific selector for the div
$('div').find('*').addBack().contents().each(function() {
if (this.nodeType == Node.TEXT_NODE) {
this.nodeValue = encodeURIComponent(this.nodeValue.trim());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
text&
<p class="foo">barbaz8798++xyzzy</p>
<span>1<5</span>
</div>
a simple question here
Is there a way to change the text "click here"
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
in this link
Richard
You have to use the jquery's text() function. What it does is:
Get the combined text contents of all
matched elements.
The result is a
string that contains the combined text
contents of all matched elements. This
method works on both HTML and XML
documents. Cannot be used on input
elements. For input field text use the
val attribute.
For example:
Find the text in the first paragraph
(stripping out the html), then set the
html of the last paragraph to show it
is just text (the bold is gone).
var str = $("p:first").text();
$("p:last").html(str);
Test Paragraph.
Test Paragraph.
With your markup you have to do:
$('a#a_tbnotesverbergen').text('new text');
and it will result in
<a id="a_tbnotesverbergen" href="#nothing">new text</a>
The method you are looking for is jQuery's .text() and you can used it in the following fashion:
$('#a_tbnotesverbergen').text('text here');
$('#a_tbnotesverbergen').text('My New Link Text');
OR
$('#a_tbnotesverbergen').html('My New Link Text or HTML');
You need J-query library to do this simply:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
First you need to put your element in div like this:
<div id="divClickHere">
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
</div>
Then you should write this J-Query Code:
<script type="text/javascript">
$(document).ready(function(){
$("#a_tbnotesverbergen").click(function(){
$("#divClickHere a").text('Your new text');
});
});
</script>
I found this to be the simplest piece of code for getting the job done. As you can see it is super simple.
for
original link text
I use:
$("#sec1").text(Sector1);
where
Sector1 = 'my new link text';
From W3 Schools HTML DOM Changes: If you look at the 3rd example it shows how you can change the text in your link, "click here".
Example:
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
JS:
var element=document.getElementById("a_tbnotesverbergen");
element.innerHTML="New Text";
try this in javascript
document.getElementById("22IdMObileFull").text ="itsClicked"